如何使用jQuery Validation插件基于输入type = text / radio / checkbox验证表单

Question

I have a multi step form with dynamically generated fields that I need to validate using jQuery, this is the form . How I can achieve this ?

// next step
    $('.form-horizontal .btn-next').on('click', function() {
        $("#multiphase").validate();

        $('input[type="text"]').each(function(){
            $(this).rule('add', {
                required: true,
                messages:{
                    required: "This field is required"
                }
            })
        })

    });

Answer 1

First of all, you can validate elements using "name" attribute. you can show below example:

<script type="text/javascript">
  $("#pseudoForm").validate({
    onfocusout:true,
    rules:{
      first_name:"required",
      last_name:"required"
    }
  });
</script>
<!-- whatever -->
<div id="pseudoForm">
  <input type="text" name="first_name"/>
  <input type="text" name="last_name"/>
</div>

also you can see reference as this link LINK

Answer 2

You should map the input fields to an object containing the rules for the validation plugin. I assume you're using this: http://jqueryvalidation.org/

Here's the general idea:

  var fields = {};
  $('form').find(':input').each(function() {
    fields[this.name] = "required";
  });

  $('form').validate({
    rules: fields
  });

Of course you have to configure the plugin a bit more, but this is how you will handle the dynamic fields at least. An alternative would be to generate the rules server-side.