Form validation with jQuery (without validation.js)

Question

I want to perform a form validation with jQuery. Right now I'm using HTML5 'required' inside the input tag, and this code of jQuery for the validation:

jQuery:

$("#register").click(function() {

    $("#register input").each(function() {
        $(this).css('border','none');
        if(!$(this).val()) {
            $(this).css('border','solid 1px red');
        }
        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if($(this).attr("type")=="email" && !email_reg.test($(this).val())){
            $(this).css('border','solid 1px red');
        }
    });

When using IE9, there is no support in HTML5 'required', so although the script is working, it's still running the input action .php file. I'll be happy to know can I fix it using the existing code and without using validate.js or other external files.

HTML5:

<form id="register" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post">
<p><label>First name</label><input type="text" id="name" name="name" required="true" /></p>
<p><label>Last name</label><input type="text" id="fname" name="fname" required="true" /></p>
<p><label>Email</label><input type="email" id="email" name="email" required="true" /></p>
<p>
    <label>Phone</label>
    <input id="area-code" type="text" name="code" maxlength="3" required="true" onkeydown="return isNumber(event);" />
    <input id="phone" type="text" name="phone" required="true" maxlength="17" onkeydown="return isNumber(event);" />

</p>
<input type="submit" value="GET BONUS NOW" id="submit-btn" />
<?php include 'form.php';?>

antyrat · Accepted Answer · 2014-09-28 14:16:39Z

1

You need to change from validation from click event to submit:

$("#register").submit(function() {

And modify your code to look for errors with some boolean flag and return false if errors was found:

var errors = false;
$("#register input").each(function() {

    $(this).css('border','none');
    if(!$(this).val()) {
        $(this).css('border','solid 1px red');
        errors = true;
    }
    var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
    if($(this).attr("type")=="email" && !email_reg.test($(this).val())){
        $(this).css('border','solid 1px red');
        errors = true;
    }
});
if( errors ) {
    return false;
}

answered Sep 28, 2014 at 14:16

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

yuvalsab Over a year ago

Thanks for taking your time and helping me. This code is working, but now i'd like to know two things: (1) It's working only on click event, not on submit event (tried both). (2) On IE9, I can type invalid email address.

antyrat Over a year ago

1. It should work only on submit event. Look if register ID is unique on HTML and it's applied to <form> element. 2. That's trange, are you sure your regexp is correct?

yuvalsab Over a year ago

turns out it's not working in submit event because of 'required' inside the input tag. It was nice of I could use both of them. Why not use the click event...?

antyrat Over a year ago

You can use click on form but it's useless as for me as form isn't block element or something better to use submit event that will work on Enter keydown event for example or click on submit.

Collectives™ on Stack Overflow

Form validation with jQuery (without validation.js)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related