Plugin 2108

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$( ".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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
Comments








© Plugin 2108 2025
Partners