Question

I have a question which I know its a basic one.

I have an html form:

<form id="form-contact" name="htmlform" class="styled"  accept-charset="windows-1255,utf-8,iso-8859-1,us-ascii" action= "html_form_send.php" method="post">

and jquery onClick event that validates the form fields, related to the same submit-button that submits the form to php file:

 <input id="btn-submit" class="btn-submit" type="image" width="60" height="34" src="images/Site_Images/btn_contact.jpg"  name="submit_btn"

My jquery code is given below:

$('.btn-submit').click(function(e){

    var $formId = $(this).parents('form');
    var formAction = $formId.attr('action');
    defaulttextRemove();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    $('li',$formId).removeClass('error');
    $('span.error').remove();
    $('.required',$formId).each(function(){
        var inputVal = $(this).val();
        var $parentTag = $(this).parent();
        if(inputVal == ''){ 
            $parentTag.addClass('error').append('<span class="error">no data in the field</span>');
        }
        if($(this).hasClass('email') == true){
            if(!emailReg.test(inputVal)){
                $parentTag.addClass('error').append('<span class="error">email not accurate</span>');
            }
        }
    });

e.preventDefault();
});

---

The behaviour I want is after validated by jquery, if all is OK then submit the form to php. I hope that I’m making sense. Can you show me the right approach for such case?

Thanks.

Answer 1

For the general idea:

$('.btn-submit').click(function(e){
        e.preventDefault();
        var $formId = $(this).parents('form');
        var formAction = $formId.attr('action');
        defaulttextRemove();
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        $('li',$formId).removeClass('error');
        $('span.error').remove();
        $('.required',$formId).each(function(){
            var inputVal = $(this).val();
            var $parentTag = $(this).parent();
            if(inputVal == ''){ 
                $parentTag.addClass('error').append('<span class="error">no data in the field</span>');
            }
            if($(this).hasClass('email') == true){
                if(!emailReg.test(inputVal)){
                    $parentTag.addClass('error').append('<span class="error">email not accurate</span>');
                }
            }
        });

        if($('*.error',$formId).length) return false;
        else $formId.trigger('submit');
    });