Clear Input If It's Not An Email Address Using Javascript Or Jquery
Solution 1:
As a seasoned WordPress expert, I could say the following:
- WordPress generally doesn't allow you to use
$for jQuery. Try usingjQueryinstead. - Secondly, you haven't put inside the
document'sreadyevent, which is more important.
Ultimately, what I suggest you to do is, combine the both and try:
(function($) {
$(function() {
$('#cp_email_address').blur(function() {
var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(this.value)) {}; // if true pass else {
this.value = "";
};
});
});
})(jQuery)
What I had done above is, I created an IIFE, which takes in its first parameter as jQuery so, this gets associated with $ inside the function. So this should 90% work, if you don't get any errors.
Try to add this function in the footer.php or somewhere, which definitely gets called.
Update: Well, I know this already, but just wanted to be sure. Anyway, as adeneo pointed out, it is fine to use this variant as well:
jQuery(function($) {
$('#cp_email_address').blur(function() {
var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(this.value)) {}; // if true pass else {
this.value = "";
};
});
});
Again, quoting from his comment:
If you have no idea how Wordpress works, maybe you should hire someone that can edit the plugin to make it actually work the way it should, with server side validation!
Solution 2:
You should look into the jQuery Validation plugin because trying to write your own regular expressions for emails is like trying to reinvent the wheel. You'll constantly find emails that are valid that don't validate. You fix your regex and then some other email doesn't validate.
jQuery Validation has validators for a wide range of inputs with email being just one of them. The framework is also friendly to customization allowing you to add your own validation methods dynamically as needed.
Also, instead of clearing the input, just show a message and require them to fix it before allowing them to submit. Clearing a field without telling the user why is going to driver users insane.
Additionally, using change events like keyup or mouseout on the field and then trying to clear the field can lead to problems.
If you try to validate an email on keyup a user will never be able to enter an email address because after typing their first key the validator would fire and the email wouldn't validate cause the field to be cleared. No one would every be able to fill out the form.
Mouseout is also not a good solution. Many people, especially those with disabilities, never use the mouse to complete a form. Instead they use the keyboard only using the TAB key to go from field to field. For these users mouseout will never fire and your field will never be validated. In my experience the blur event isn't reliable either. While it is nice to have dynamic validation you always need to make sure all of your fields are valid upon form submission regardless any events being fired or not fired on individual fields.
jQuery Validation takes care of all of these issues for us.
<!doctype html><html><head><metacharset="utf-8"><title>Makes "cp_email_address" required and an email address.</title><linkrel="stylesheet"href="https://jqueryvalidation.org/files/demo/site-demos.css"></head><body><formid="myform"><labelfor="field">Required, email: </label><inputclass="left"id="cp_email_address"name="cp_email_address"><br/><inputtype="submit"value="Validate!"></form><scriptsrc="https://code.jquery.com/jquery-1.11.1.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script><script>// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
jQuery( "#myform" ).validate({
rules: {
cp_email_address: {
required: true,
email: true
}
}
});
</script></body></html>
Post a Comment for "Clear Input If It's Not An Email Address Using Javascript Or Jquery"