How to validate form both on submit and keyup

Question

My form validates on keyup, but when I try to validate it on submit too I just can't think what to do.

This is my HTML:

   <form action="#" method="post">                      
        <section class="col">   

            <section class="row">                   
                <label for="name">Name</label>
                <input type="text" name="name" value="" id="name" class="field validate-field valid-name" />                    
            </section>

            <section class="row">                   
                <label for="email">Email Address</label>
                <input type="text" name="email" value="" id="email" class="field validate-field valid-mail" />                  
            </section>

            <section class="row">                   
                <label for="phone">Phone Number</label>
                <input type="text" name="phone" value="" id="phone" class="field validate-field valid-phone" />                     
            </section>                  
        </section>

        <section class="col">               
            <label for="message">Message</label>
            <textarea class="field validate-field valid-text" name="message" id="message-field"></textarea>
            <input type="submit" value="Submit" class="submit-button" />
        </section>
   </form>

JS:

function validate( field ){
    var value = field.val();
    var to_label = field.parent().find('label');
    var error = false;
    var error_message = '';

    to_label.find('span').remove();

    if ( field.hasClass('validate-field') && value == '' ) {
        error = true;
        error_message = 'Empty Field';  
    } else if ( field.hasClass('valid-name') && valid_name(value) == false ) {
        error = true;
        error_message = 'Name must consist characters only';
    } else if ( field.hasClass('valid-mail') && valid_email(value) == false ) {
        error = true;
        error_message = 'Invalid Email';
    } else if ( field.hasClass('valid-phone') && valid_phone(value) == false ) {
        error = true;
        error_message = 'Your phone must be digits only';
    };

    if ( error == true ) {
        to_label.append('<span>'+ error_message +'</span>');
    }
};


$('.validate-field').live('keyup', function(){
    validate( $(this) );
});

function valid_name(value){
    var valid = /^([a-zA-Z_\.\-\+])+$/;
    return valid.test(value);
};

function valid_email(value){
    var valid = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return valid.test(value);
};

function valid_phone(value){
    var valid = /^[0-9-+]+$/;
    return valid.test(value);

};

And I have to add something like this:

$('form').live('submit', function(){

    if ( "...validated..." ) {  
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

What should be in the submit function?

I have tried:

$('form').live('submit', function(){

    var valid = validate( $('.field') )

    if ( valid  == true ) { 
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

But this validates all the forms with all the validation (e-mail, phone ...). I have tried in validation() function to add if (error == false){ return: true }, then in submit function ran validation() and added if ( validation() == true ){ .. to send php ..}. That didn't work too. What I need to do ?

Answer 1

I guess you can validate the whole form by:

function validateAll() {
    var valid = true;
    $('form').find('.validate-field').each(function (i, e) {
        if (!validate($(this))) {
           valid = false;
            return;
        }
    });
    return valid;
}

function validate( field ){
    var value = field.val();
    var to_label = field.parent().find('label');
    var error = false;
    var error_message = '';

    to_label.find('span').remove();

    if ( field.hasClass('validate-field') && value == '' ) {
        error = true;
        error_message = 'Empty Field';  
    } else if ( field.hasClass('valid-name') && valid_name(value) == false ) {
        error = true;
        error_message = 'Name must consist characters only';
    } else if ( field.hasClass('valid-mail') && valid_email(value) == false ) {
        error = true;
        error_message = 'Invalid Email';
    } else if ( field.hasClass('valid-phone') && valid_phone(value) == false ) {
        error = true;
        error_message = 'Your phone must be digits only';
    };

    if (error) {
        to_label.append('<span>'+ error_message +'</span>');
    }
    return !error;

};

$('form').live('submit', function(){

    if (validateAll()) {  
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

That's the option which requires the smallest amount of refactoring, on my opinion.

Just let me explain you what the function validateAll does. It finds all fields with class validate-field and pass it as argument to the validate function. Because of the refactoring I made in validate it returns false if the field is not valid so when we call validate with specific input and it's invalid we just return false (the form is not valid).

Here is an example in JSfiddle.

For more advance validation I can recommend you validation plugins like: http://docs.jquery.com/Plugins/Validation or jqxValidator.

Answer 2

You are almost done. Just add below code, it'll work

$('form').submit(function(){
    var field = $(this).find('.validate-field');
    validate( field );
});

Hope this will solve your issue.

Fiddle: http://jsfiddle.net/r1webs/cFeCx/