Add email and numerical validation to jquery form

Question

I have a very simple questionnaire form that only needs a few fields be mandatory. How can I add an email validation to the email field to confirm its an actual email. and how can I confirm that the zip_code contains only numbers? Also would be awesome if instead of using an alert I could use a div tag that would show up on the form and tell them what they need to fill out if anyone knows how to simply add that. I am using Twitter Bootstrap and would love to use their warning div's

$(document).ready(function(){ 
    $('#contact_form').submit(function(){
        if ($('#first_name').val() == '') {
            alert('You must enter your first name!');           
            return false;
        }
        if ($('#last_name').val() == '') {
            alert('You must enter your last name!');
            return false;
        }
        if ($('#email').val() == '') {
            alert('You must enter an email!');
            return false;
        } 
        if ($('#zip_code').val() == '') {
            alert('You must enter your zip code!');
            return false;
        }  
        if ($('#message').val() == '') {
            alert('You need to tell us something! Please enter your message!');
            return false;
        }
    });
});

score 1 · Accepted Answer · answered Jul 11 '13 at 01:00

You can do something like this

THE HTML

<div class="error"></div>
<form id="contact_form" method="post" action="">
    <input type="text" name="first_name" id="first_name" placeholder="First Name"/>
    <br/>
    <input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
    <br/>
    <input type="text" name="email" id="email" placeholder="Email"/>
    <br/>
    <input type="text" name="zip_code" id="zip_code" placeholder="Zip Code"/>
    <br/>
    <textarea name="message" id="message" placeholder="Message"></textarea>
    <br/>
    <input type="submit" value="submit" />
</form>

THE JQUERY

$(document).ready(function(){ 
    $('#contact_form').submit(function(){
        error = '';

        if ($('#first_name').val() == '') {
            error += 'You must enter your first name!<br/>';
        }

        if ($('#last_name').val() == '') {
            error += 'You must enter your last name!<br/>';
        }

        if ($('#email').val() == '') {
            error += 'You must enter your email<br/>';
        }
        else
        {
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

            if(!pattern.test($('#email').val()))
            {
                error += "Invalid email address<br/>";
            }
        }

        if ($('#zip_code').val() == '') {
            error += 'You must enter your zip code<br/>';
        } 
        else
        {
            if (!isNumber($('#zip_code').val()))
            {
                error += 'Invalid zip code<br/>';
            }
        }
        if ($('#message').val() == '') {
            error += 'You need to tell us something! Please enter your message!';
        }

        if(error != '')
        {
            $('.error').html(error);
            $('.error').fadeIn();
            return false;
        }
        else
        {
            return true;
        }
    });
});

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

EXAMPLE Fiddle

You da man that work perfectly as I needed it to. Master of your craft sir! — Lynx, Jul 11 '13 at 01:17

score 0 · Answer 2 · edited May 23 '17 at 12:21

Check out this answer for validating your email field Email validation using jQuery

Check out this answer for Zip Code validation ZIP Code (US Postal Code) validation

To output to bootstrap warning message put something like the following instead of your alerts...

 $(body).prepend('<div class="alert alert-block alert-error fade in"><a class="close" data-dismiss="alert" href="#">&times;</a>You need to tell us something! Please enter your message!</div>');

Add email and numerical validation to jquery form

2 Answers2