Javascript Form Validate

Use as a first validation layer

Step 1: add the form ID to the submit button attribute

Step 2: Make sure each input field PARENT has a ID. That way the “error class will be added to the parent wrapper.

Step 3: Make sure each input field has a “data-error-message” attribute. This will be pasted in the error box. If you forget this you will get “undefined” pasted in the box. You can use HTML in these.

Step 4: Make sure your form has a div with a class of “form_status”. Otherwise the errors won’t get pasted anywhere.

Step 5: If you want the field to have a input status text or mark make sure you put a span tag with “input_status” class within the input wrap parent.

            $( ".validate_form" ).click(function(event) { // 1017PM
            
                    function IsEmail(email) {
                      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                      return regex.test(email);
                    }    
             
                  var this_forms_id  = $(this).attr('data-forms-id');
                  var parent         = "";
                  var error_message  = "";
                  var error_messages = "";
                  var field_value    = "";
                  var has_errors     = false;
                  
             
                  $(this_forms_id+" .required").each(function(i, input) {
                        parent         = $(input).parent().attr('id');
                        $( '#'+parent  ).removeClass( 'error' );
                        $( '#'+parent+' .input_status').text('');
                        error_message  = $(input).attr('data-error-message');
                        field_value    = $(input).val();      
                    
                      if (field_value == "") { //325PM
                        has_errors = true;
                        $('#'+parent).addClass('error');
                        $('#'+parent+' .input_status').text('Error');
                        error_messages = error_messages + error_message;
                      } //325PM  

		      if ($(this).attr('type') == "radio") {
		              var radio_name = $(this).attr("name");
		              if (!$('[name="'+radio_name+'"]').is(':checked')) { 
				            $('#'+parent).addClass('error');
				            $('#'+parent+' .input_status').text('Error');
				            if (error_message != undefined) { error_messages = error_messages + error_message; }             
		              }		          
		       }     
                    
                  });   
                    
                  $(this_forms_id+" .validate_email").each(function(i, email) {
                        parent         = $(email).parent().attr('id');
                        error_message  += $(email).attr('data-error-message');
                        field_value    = $(email).val();
                        if (!IsEmail(field_value))   { //617PM
                        has_errors = true;
                        error_messages += "Email invalid";
                        $('#'+parent).addClass('error');
                        $('#'+parent+' .input_status').text('Error');             
                        } //617PM
                                  
                  });   
                
                  if (has_errors == true) { //326PM
                          $(this_forms_id+' .form_status').addClass('error');
                          $(this_forms_id+' .form_status' ).removeClass( "hide" ).addClass( "show" );
                          $(this_forms_id+' .form_status').html(error_messages);
                  } //326PM
                    
             
                  if (has_errors == false) { //321PM
                      $(this_forms_id).submit();
                  } //321PM
                    
                        
             
            }); // 1017PM

Form Example

<form action="http://yoyo.com/bid-request/" method="post" enctype="text" id="bid_request_form" >
    
    <div class="br_input_wrap" id="name_input_wrap">
        <label>Name<span>*</span></label>
        <input type="text" name="bid_request_name"  id="name"  value="" placeholder="First Name, Last Name" class="required" data-error-message="<div>Forgot Name</div>"/>
        <span class="input_status"></span>
    </div>
    
    <div class="br_input_wrap" id="bid_request_email_wrap">
        <label>Email<span>*</span></label>
        <input type="text" name="bid_request_email" id="email" value="" class="validate_email"  data-error-message="<div>Forgot Email</div>" />
        <span class="input_status"></span>
    </div>
    
    <div class="br_input_wrap" id="bid_request_phone_wrap">
        <label>Phone<span>*</span></label>
        <input type="text" name="bid_request_phone" id="phone" value="" class="required"  data-error-message="<div>Forgot Phone</div>" />
        <span class="input_status"></span>
    </div>
    
    <div class="br_input_wrap" id="bid_details_wrap">
        <label>Bid Details<span>*</span></label>
        <textarea name="bid_details" id="bid_details" class="required" data-error-message="<div>Forgot Bid Details</div>"></textarea>
        <span class="input_status"></span>
    </div>

    <input type="hidden" name="queried_contractors" id="queried_contractors" value="" />
    
    <button type="button" class="submit_button validate_form" data-forms-id="#bid_request_form">Submit</button>       
    <input type="hidden" name="bid_request_submitted" id="bid_request_submitted" value="true" />
    
    <div class="form_status"></div>

</form>