Jquery validation with dynamic inputs

Question

I have lots of fields with similar name in form. They all have same validation rules and messages. All i want is use some variables in js part and shorten this code and make it more dynamic. However i can't figure out how to do it.

Html form:

<form id="myForm" novalidate="novalidate">


          <div class="row form-section mr-b30"> <!-- FORM SECTION START -->
            <div class="col-xl-12 form-blocks-wrapper"> <!-- FORM BLOCK WRAPPER START -->
              <div class="container-full form-block mr-b30" id="Farmasotik_Formlar"> <!-- FORM BLOCK START -->
                <div class="row form-parts-wrapper"> <!-- FORM PART START -->
                  <div class="container">
                    <div class="row form-parts-group">

                      <div class="col-xl-6 select-container">
                          <div class="row">
                            <div class="col-xl-12 container-title">
                              <h4>Field 1</h4>
                            </div>
                            <div class="input-field select-item-container col-xl-12">
                              <select class="select-box" id="field[0][0]" name="field[0][0]" required="required" aria-required="true">
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                              </select>
                            </div>
                          </div>
                      </div>
                      <div class="col-xl-6 select-container">
                        <div class="row">
                          <div class="col-xl-12 container-title">
                            <h4>Field 2</h4>
                          </div>
                          <div class="input-field select-item-container col-xl-12">
                            <select class="select-box" id="field[0][1]" name="field[0][1]" required="required" aria-required="true">
                              <option value="" disabled selected>Choose your option</option>
                              <option value="1">Option 1</option>
                              <option value="2">Option 2</option>
                              <option value="3">Option 3</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="col-xl-6 select-container">
                          <div class="row">
                            <div class="col-xl-12 container-title">
                              <h4>Field 3</h4>
                            </div>
                            <div class="input-field select-item-container col-xl-12">
                              <select class="select-box" id="field[1][0]" name="field[1][0]" required="required" aria-required="true">
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                              </select>
                            </div>
                          </div>
                      </div>
                      <div class="col-xl-6 select-container">
                          <div class="row">
                            <div class="col-xl-12 container-title">
                              <h4>Field 4</h4>
                            </div>
                            <div class="input-field select-item-container col-xl-12">
                              <select class="select-box" id="field[1][1]" name="field[1][1]" required="required" aria-required="true">
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                              </select>
                            </div>
                          </div>
                      </div>
                      <div class="col-xl-6 select-container">
                          <div class="row">
                            <div class="col-xl-12 container-title">
                              <h4>Field 5</h4>
                            </div>
                            <div class="input-field select-item-container col-xl-12">
                              <select class="select-box" id="field[2][0]" name="field[2][0]" required="required" aria-required="true">
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                              </select>
                            </div>
                          </div>
                      </div>
                      <div class="col-xl-6 select-container">
                          <div class="row">
                            <div class="col-xl-12 container-title">
                              <h4>Field 6</h4>
                            </div>
                            <div class="input-field select-item-container col-xl-12">
                              <select class="select-box" id="field[2][1]" name="field[2][1]" required="required" aria-required="true">
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                              </select>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div> <!-- FORM PART END -->
              </div> <!-- FORM BLOCK END -->
            </div> <!-- FORM BLOCK WRAPPER END -->
          </div> <!-- FORM SECTON END -->
          <input type="submit" value="submit" id="submit" name="action">
        </form>

Validation.js:

$(document).ready(function() {
  $("select").material_select();
  $("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'});

  var req = "Required.";

  $("#myForm").validate({
    rules: {
      field[0][0]: {
        required: true
      },
      field[0][1]: {
        required: true
      },
      field[1][0]: {
        required: true
      },
      field[1][1]: {
        required: true
      },
      field[2][0]: {
        required: true
      },
      field[2][1]: {
        required: true
      }
    },
    messages: {
      field[0][0]: {
        required: req
      },
      field[0][1]: {
        required: req
      },
      field[1][0]: {
        required: req
      },
      field[1][1]: {
        required: req
      },
      field[2][0]: {
        required: req
      },
      field[2][1]: {
        required: req
      }
    },
    errorElement : 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
  $(placement).append(error)
} else {
  error.insertAfter(element);
}
}
  });

});

That's what i want:

$(document).ready(function() {
  $("select").material_select();
  $("select[required]").css({display: "block", height: 0, padding: 0, width: 0, position: 'absolute'});

  var req = "Required.";
  var field = "field"+"*";

  $("#myForm").validate({
    rules: {
      field: {
        required: true
      }
    },
    messages: {
      field: {
        required: req
      }
    },
    errorElement : 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
  $(placement).append(error)
} else {
  error.insertAfter(element);
}
}
  });

});

You could validate by pure jQuery instead of using `.validate()`. — apires, May 26 '17 at 12:19
you could use a loop to create the rules object, iterating through your fields array and adding items to the object as you go. — ADyson, May 26 '17 at 13:53
*"shorten and make more dynamic"* is a very broad request because there are so many different ways to specify the rules using this plugin. Please be very specific about what you're trying to achieve. Otherwise, there are some tips here: https://stackoverflow.com/a/9056425/594235 — Sparky, May 26 '17 at 20:10

Trimantra Software Solution · Answer 1 · 2017-05-29T06:57:17.420

2

Try This,

$(document).ready(function() {

  var req = "Required.";   

  $("#myForm").validate({

    submitHandler: function(form) {
            form.submit();
    }
  });

  $(".select-box").each(function(){
       $(this).rules("add", { 
           required:true,
           messages:{required:req}
       });
  });
});

jsFiddle for the same

http://jsfiddle.net/tg2rupcg/72/

edited May 29 '17 at 06:57

answered May 29 '17 at 04:38

Trimantra Software Solution

3,223
2
25
44

Jquery validation with dynamic inputs

1 Answers1