Inputs equality check using jQuery without plugins
up vote
0
down vote
favorite
I tried creating a function to check for a match between two email fields, let's say EMAIL and CONFIRM email. I absolutely try to avoid jQuery validate. It is not worth it for a single field. For the rest I use HTML5 properties like required, pattern, etc. and it works well. This is why I want to deliver seamless experience with setCustomValidity.
Here's my working code, which of course, may be improved by someone with more experience in JS and jQuery.
HTML
<input type="email" name="addr1" id="addr1" required>
<input type="email" name="addr2" data-equal-to="addr1" data-msg-error="Emails do not match." required>
jQuery
$('[data-equal-to]').on('blur', function() {
var to_confirm = $(this),
to_equal = $('#' + to_confirm.data('equal-to'));
if (to_confirm.val() != to_equal.val()) {
this.setCustomValidity(to_confirm.data('msg-error'));
}
else {
this.setCustomValidity('');
}
to_equal.one('blur', function() {
to_confirm.trigger('blur');
});
});
Here are the problems I encountered:
- I was using '.bind'. It turns out its deprecated. Then I started using
'.on' - I forgot the last 3 lines. There was no event listener for the
first email input, so I was only checking the CONFIRM input. This
got fixed. - I was using 'input' instead of 'blur'. 'input' provided
real-time validation (as you type) which is good, but consumed too
much in my opinion. Also it showed errors while you are still typing
(and haven't finished), so some users may find it confusing. The only
drawback of 'blur' I find is that feedback on validity comes after
you click another element (unfocus). - Binding on every input a new listener to 'to_equal' turned out to be a bad idea. I ended up with multiple listeners, causing the browser to crash. I found out that '.one' exists, which should do the same as .off before .on (or maybe after?)
My question is - can this little script be improved in terms of speed, or using less event listeners? Is there a case I haven't thought of? I searched a lot to find a good no plugin solution, but with no luck. Also I insist on using data- attributes to provide the matching id + the error message (as the website is multi-lingual and its easier to modify HTML than JS on the fly).
I think that having the 'perfect' version of this script will help a lot of people, especially in confirm email/password (for passwords case sensitivity must be in mind!) aspect.
javascript jquery validation html5
add a comment |
up vote
0
down vote
favorite
I tried creating a function to check for a match between two email fields, let's say EMAIL and CONFIRM email. I absolutely try to avoid jQuery validate. It is not worth it for a single field. For the rest I use HTML5 properties like required, pattern, etc. and it works well. This is why I want to deliver seamless experience with setCustomValidity.
Here's my working code, which of course, may be improved by someone with more experience in JS and jQuery.
HTML
<input type="email" name="addr1" id="addr1" required>
<input type="email" name="addr2" data-equal-to="addr1" data-msg-error="Emails do not match." required>
jQuery
$('[data-equal-to]').on('blur', function() {
var to_confirm = $(this),
to_equal = $('#' + to_confirm.data('equal-to'));
if (to_confirm.val() != to_equal.val()) {
this.setCustomValidity(to_confirm.data('msg-error'));
}
else {
this.setCustomValidity('');
}
to_equal.one('blur', function() {
to_confirm.trigger('blur');
});
});
Here are the problems I encountered:
- I was using '.bind'. It turns out its deprecated. Then I started using
'.on' - I forgot the last 3 lines. There was no event listener for the
first email input, so I was only checking the CONFIRM input. This
got fixed. - I was using 'input' instead of 'blur'. 'input' provided
real-time validation (as you type) which is good, but consumed too
much in my opinion. Also it showed errors while you are still typing
(and haven't finished), so some users may find it confusing. The only
drawback of 'blur' I find is that feedback on validity comes after
you click another element (unfocus). - Binding on every input a new listener to 'to_equal' turned out to be a bad idea. I ended up with multiple listeners, causing the browser to crash. I found out that '.one' exists, which should do the same as .off before .on (or maybe after?)
My question is - can this little script be improved in terms of speed, or using less event listeners? Is there a case I haven't thought of? I searched a lot to find a good no plugin solution, but with no luck. Also I insist on using data- attributes to provide the matching id + the error message (as the website is multi-lingual and its easier to modify HTML than JS on the fly).
I think that having the 'perfect' version of this script will help a lot of people, especially in confirm email/password (for passwords case sensitivity must be in mind!) aspect.
javascript jquery validation html5
If you want to do the validation check while they're typing, but without annoying them before they're done, search for "debouncing".
– Barmar
Nov 3 '17 at 19:29
Yes, that is helpful and also mentioned by wOxxOm. Thank you Barmar!
– Svetoslav Genov
Nov 4 '17 at 8:29
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I tried creating a function to check for a match between two email fields, let's say EMAIL and CONFIRM email. I absolutely try to avoid jQuery validate. It is not worth it for a single field. For the rest I use HTML5 properties like required, pattern, etc. and it works well. This is why I want to deliver seamless experience with setCustomValidity.
Here's my working code, which of course, may be improved by someone with more experience in JS and jQuery.
HTML
<input type="email" name="addr1" id="addr1" required>
<input type="email" name="addr2" data-equal-to="addr1" data-msg-error="Emails do not match." required>
jQuery
$('[data-equal-to]').on('blur', function() {
var to_confirm = $(this),
to_equal = $('#' + to_confirm.data('equal-to'));
if (to_confirm.val() != to_equal.val()) {
this.setCustomValidity(to_confirm.data('msg-error'));
}
else {
this.setCustomValidity('');
}
to_equal.one('blur', function() {
to_confirm.trigger('blur');
});
});
Here are the problems I encountered:
- I was using '.bind'. It turns out its deprecated. Then I started using
'.on' - I forgot the last 3 lines. There was no event listener for the
first email input, so I was only checking the CONFIRM input. This
got fixed. - I was using 'input' instead of 'blur'. 'input' provided
real-time validation (as you type) which is good, but consumed too
much in my opinion. Also it showed errors while you are still typing
(and haven't finished), so some users may find it confusing. The only
drawback of 'blur' I find is that feedback on validity comes after
you click another element (unfocus). - Binding on every input a new listener to 'to_equal' turned out to be a bad idea. I ended up with multiple listeners, causing the browser to crash. I found out that '.one' exists, which should do the same as .off before .on (or maybe after?)
My question is - can this little script be improved in terms of speed, or using less event listeners? Is there a case I haven't thought of? I searched a lot to find a good no plugin solution, but with no luck. Also I insist on using data- attributes to provide the matching id + the error message (as the website is multi-lingual and its easier to modify HTML than JS on the fly).
I think that having the 'perfect' version of this script will help a lot of people, especially in confirm email/password (for passwords case sensitivity must be in mind!) aspect.
javascript jquery validation html5
I tried creating a function to check for a match between two email fields, let's say EMAIL and CONFIRM email. I absolutely try to avoid jQuery validate. It is not worth it for a single field. For the rest I use HTML5 properties like required, pattern, etc. and it works well. This is why I want to deliver seamless experience with setCustomValidity.
Here's my working code, which of course, may be improved by someone with more experience in JS and jQuery.
HTML
<input type="email" name="addr1" id="addr1" required>
<input type="email" name="addr2" data-equal-to="addr1" data-msg-error="Emails do not match." required>
jQuery
$('[data-equal-to]').on('blur', function() {
var to_confirm = $(this),
to_equal = $('#' + to_confirm.data('equal-to'));
if (to_confirm.val() != to_equal.val()) {
this.setCustomValidity(to_confirm.data('msg-error'));
}
else {
this.setCustomValidity('');
}
to_equal.one('blur', function() {
to_confirm.trigger('blur');
});
});
Here are the problems I encountered:
- I was using '.bind'. It turns out its deprecated. Then I started using
'.on' - I forgot the last 3 lines. There was no event listener for the
first email input, so I was only checking the CONFIRM input. This
got fixed. - I was using 'input' instead of 'blur'. 'input' provided
real-time validation (as you type) which is good, but consumed too
much in my opinion. Also it showed errors while you are still typing
(and haven't finished), so some users may find it confusing. The only
drawback of 'blur' I find is that feedback on validity comes after
you click another element (unfocus). - Binding on every input a new listener to 'to_equal' turned out to be a bad idea. I ended up with multiple listeners, causing the browser to crash. I found out that '.one' exists, which should do the same as .off before .on (or maybe after?)
My question is - can this little script be improved in terms of speed, or using less event listeners? Is there a case I haven't thought of? I searched a lot to find a good no plugin solution, but with no luck. Also I insist on using data- attributes to provide the matching id + the error message (as the website is multi-lingual and its easier to modify HTML than JS on the fly).
I think that having the 'perfect' version of this script will help a lot of people, especially in confirm email/password (for passwords case sensitivity must be in mind!) aspect.
javascript jquery validation html5
javascript jquery validation html5
asked Oct 31 '17 at 11:29
Svetoslav Genov
101
101
If you want to do the validation check while they're typing, but without annoying them before they're done, search for "debouncing".
– Barmar
Nov 3 '17 at 19:29
Yes, that is helpful and also mentioned by wOxxOm. Thank you Barmar!
– Svetoslav Genov
Nov 4 '17 at 8:29
add a comment |
If you want to do the validation check while they're typing, but without annoying them before they're done, search for "debouncing".
– Barmar
Nov 3 '17 at 19:29
Yes, that is helpful and also mentioned by wOxxOm. Thank you Barmar!
– Svetoslav Genov
Nov 4 '17 at 8:29
If you want to do the validation check while they're typing, but without annoying them before they're done, search for "debouncing".
– Barmar
Nov 3 '17 at 19:29
If you want to do the validation check while they're typing, but without annoying them before they're done, search for "debouncing".
– Barmar
Nov 3 '17 at 19:29
Yes, that is helpful and also mentioned by wOxxOm. Thank you Barmar!
– Svetoslav Genov
Nov 4 '17 at 8:29
Yes, that is helpful and also mentioned by wOxxOm. Thank you Barmar!
– Svetoslav Genov
Nov 4 '17 at 8:29
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
Switch to the native DOM methods like getElementById, which is orders of magnitude faster and you can keep input
:
$('[data-equal-to]').on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
});
You can also debounce the verification by 200ms, for example:
;(function() {
var timeout;
function validateEquality(element) {
var target = document.getElementById(element.dataset.equalTo);
var isEqual = !target || target.value == element.value;
element.setCustomValidity(isEqual ? '' : element.dataset.msgError);
}
$('[data-equal-to]').on({
input: function() {
clearTimeout(timeout);
timeout = setTimeout(validateEquality, 200, this);
}),
blur: function() {
clearTimeout(timeout);
validateEquality(this);
}),
});
})();
You can also make this a jQuery plugin.
As for mirroring the check for the target element, the preferable approach is to explicitly declare data-equal-to
attribute on both input elements that points to the other one. But you can also do it implicitly by adding equalOf
expando property pointing to the linked element so you can re-triggering input
event on it:
$('[data-equal-to]')
.on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
})
.map(function() {
var target = document.getElementById(this.dataset.equalTo);
target.equalOf = this;
return target;
})
.on('input', function() {
$(target.equalOf).trigger('input');
});
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
Switch to the native DOM methods like getElementById, which is orders of magnitude faster and you can keep input
:
$('[data-equal-to]').on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
});
You can also debounce the verification by 200ms, for example:
;(function() {
var timeout;
function validateEquality(element) {
var target = document.getElementById(element.dataset.equalTo);
var isEqual = !target || target.value == element.value;
element.setCustomValidity(isEqual ? '' : element.dataset.msgError);
}
$('[data-equal-to]').on({
input: function() {
clearTimeout(timeout);
timeout = setTimeout(validateEquality, 200, this);
}),
blur: function() {
clearTimeout(timeout);
validateEquality(this);
}),
});
})();
You can also make this a jQuery plugin.
As for mirroring the check for the target element, the preferable approach is to explicitly declare data-equal-to
attribute on both input elements that points to the other one. But you can also do it implicitly by adding equalOf
expando property pointing to the linked element so you can re-triggering input
event on it:
$('[data-equal-to]')
.on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
})
.map(function() {
var target = document.getElementById(this.dataset.equalTo);
target.equalOf = this;
return target;
})
.on('input', function() {
$(target.equalOf).trigger('input');
});
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
add a comment |
up vote
1
down vote
Switch to the native DOM methods like getElementById, which is orders of magnitude faster and you can keep input
:
$('[data-equal-to]').on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
});
You can also debounce the verification by 200ms, for example:
;(function() {
var timeout;
function validateEquality(element) {
var target = document.getElementById(element.dataset.equalTo);
var isEqual = !target || target.value == element.value;
element.setCustomValidity(isEqual ? '' : element.dataset.msgError);
}
$('[data-equal-to]').on({
input: function() {
clearTimeout(timeout);
timeout = setTimeout(validateEquality, 200, this);
}),
blur: function() {
clearTimeout(timeout);
validateEquality(this);
}),
});
})();
You can also make this a jQuery plugin.
As for mirroring the check for the target element, the preferable approach is to explicitly declare data-equal-to
attribute on both input elements that points to the other one. But you can also do it implicitly by adding equalOf
expando property pointing to the linked element so you can re-triggering input
event on it:
$('[data-equal-to]')
.on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
})
.map(function() {
var target = document.getElementById(this.dataset.equalTo);
target.equalOf = this;
return target;
})
.on('input', function() {
$(target.equalOf).trigger('input');
});
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
add a comment |
up vote
1
down vote
up vote
1
down vote
Switch to the native DOM methods like getElementById, which is orders of magnitude faster and you can keep input
:
$('[data-equal-to]').on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
});
You can also debounce the verification by 200ms, for example:
;(function() {
var timeout;
function validateEquality(element) {
var target = document.getElementById(element.dataset.equalTo);
var isEqual = !target || target.value == element.value;
element.setCustomValidity(isEqual ? '' : element.dataset.msgError);
}
$('[data-equal-to]').on({
input: function() {
clearTimeout(timeout);
timeout = setTimeout(validateEquality, 200, this);
}),
blur: function() {
clearTimeout(timeout);
validateEquality(this);
}),
});
})();
You can also make this a jQuery plugin.
As for mirroring the check for the target element, the preferable approach is to explicitly declare data-equal-to
attribute on both input elements that points to the other one. But you can also do it implicitly by adding equalOf
expando property pointing to the linked element so you can re-triggering input
event on it:
$('[data-equal-to]')
.on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
})
.map(function() {
var target = document.getElementById(this.dataset.equalTo);
target.equalOf = this;
return target;
})
.on('input', function() {
$(target.equalOf).trigger('input');
});
Switch to the native DOM methods like getElementById, which is orders of magnitude faster and you can keep input
:
$('[data-equal-to]').on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
});
You can also debounce the verification by 200ms, for example:
;(function() {
var timeout;
function validateEquality(element) {
var target = document.getElementById(element.dataset.equalTo);
var isEqual = !target || target.value == element.value;
element.setCustomValidity(isEqual ? '' : element.dataset.msgError);
}
$('[data-equal-to]').on({
input: function() {
clearTimeout(timeout);
timeout = setTimeout(validateEquality, 200, this);
}),
blur: function() {
clearTimeout(timeout);
validateEquality(this);
}),
});
})();
You can also make this a jQuery plugin.
As for mirroring the check for the target element, the preferable approach is to explicitly declare data-equal-to
attribute on both input elements that points to the other one. But you can also do it implicitly by adding equalOf
expando property pointing to the linked element so you can re-triggering input
event on it:
$('[data-equal-to]')
.on('input', function() {
var target = document.getElementById(this.dataset.equalTo);
var isEqual = !target || target.value == this.value;
this.setCustomValidity(isEqual ? '' : this.dataset.msgError);
})
.map(function() {
var target = document.getElementById(this.dataset.equalTo);
target.equalOf = this;
return target;
})
.on('input', function() {
$(target.equalOf).trigger('input');
});
edited Nov 1 '17 at 9:01
answered Oct 31 '17 at 12:26
wOxxOm
1,5361310
1,5361310
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
add a comment |
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
Hi wOxxOm! Thanks for taking the time to review my code. All is cool, but I don't see where you check if the value of the original (first) field is changed? It doesn't have [data-equal-to], please refer to my HTML.
– Svetoslav Genov
Oct 31 '17 at 15:01
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
I meant that your code is missing the part where I check for the validity of name="addr1" after there was already a match with name="addr2". For example if you enter both addresses correctly, get a match, then change only addr1 without editing the value of addr2.
– Svetoslav Genov
Oct 31 '17 at 23:49
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
Ah, well, I would simply specify data-equal-to attribute on both elements.
– wOxxOm
Oct 31 '17 at 23:51
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
But you must show error notifications only on the confirmation input. Thank you for your time, but I think the idea needs more careful consideration. Anyways, your code is a good example for speed improvement using native JS functions.
– Svetoslav Genov
Nov 1 '17 at 8:52
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
I've added an example of using an additional expando property to re-trigger the event.
– wOxxOm
Nov 1 '17 at 9:02
add a comment |
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f179249%2finputs-equality-check-using-jquery-without-plugins%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you want to do the validation check while they're typing, but without annoying them before they're done, search for "debouncing".
– Barmar
Nov 3 '17 at 19:29
Yes, that is helpful and also mentioned by wOxxOm. Thank you Barmar!
– Svetoslav Genov
Nov 4 '17 at 8:29