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
– apires, Commented May 26, 2017 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
– ADyson, Commented May 26, 2017 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: stackoverflow.com/a/9056425/594235 — Sparky
– Sparky, Commented May 26, 2017 at 20:10

Trimantra Software Solution · Accepted Answer · 2017-05-29 06:57:17Z

3

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, 2017 at 6:57

answered May 29, 2017 at 4:38

Trimantra Software Solution

3,3273 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery validation with dynamic inputs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related