0

I am creating some dynamic field with two fixed fields, My html structure is as follows:

<form method="POST" action="http://localhost:8000/admin/add" accept-charset="UTF-8" class="form-horizontal addclass" id="frmaddclass" enctype="multipart/form-data" novalidate="novalidate">

<input class="form-control error" placeholder="Name" id="name" required="" name="name" type="text" value="" aria-invalid="true">

<select class="form-control" required="" name="status"><option value="" selected="selected">Select</option><option value="active">active</option><option value="disabled">inactive</option></select>
<select class="form-control" required="" name="subject[]"><option value="" selected="selected">Select</option><option value="science">science</option><option value="english">english</option></select>
<select class="form-control" required="" name="subject[]"><option value="" selected="selected">Select</option><option value="science">science</option><option value="english">english</option></select>
</form>

<script type="text/javascript">
  function validate_forms() {
        $('form.addclass input').each(function () {
      if (name == 'name') {
                $(this).rules('add', {
                    required: true
                });
            }
     });

     $('form.addclass select').each(function () {
      var name = $(this).attr('name');
        $(this).rules('add', {
        required_select: true
        });
      });

      $.validator.addMethod('required_select', function (value, element) {
      return value > 0;
      }, 'Please choose an option');

     
  }

 $("form#frmaddclass").validate({
        submitHandler: function (form) {

..
});
<script>


 $(function() {

        $("form#frmaddclass").validate({
            submitHandler: function(form) {
                alert("form valid");
                return false;
            }
        });

        $('select').each(function() {
            $(this).rules('add', {
                messages: {
                    required: "custom select message"
                }
            });

        });

    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>

    <form method="POST" action="http://localhost:8000/admin/add" accept-charset="UTF-8" class="form-horizontal addclass" id="frmaddclass" enctype="multipart/form-data" novalidate="novalidate">

        <input class="form-control error" placeholder="Name" id="name" required="" name="name" type="text" value="" aria-invalid="true"><br/>

        <select class="form-control" required="" name="status">
            <option value="" selected="selected">Select</option>
            <option value="active">active</option>
            <option value="disabled">inactive</option>
        </select><br/>
        <select class="form-control" required="" name="subject[ETET][]">
            <option value="" selected="selected">Select</option>
            <option value="science">science</option>
            <option value="english">english</option>
        </select><br/>
        <select class="form-control" required="" name="subject[ETET][]">
            <option value="" selected="selected">Select</option>
            <option value="science">science</option>
            <option value="english">english</option>
        </select>
        <select class="form-control" required="" name="subject[ETET][]">
            <option value="" selected="selected">Select</option>
            <option value="science">science</option>
            <option value="english">english</option>
        </select>
        <br/>
        <input type="submit" />
    </form>

Now issue is when i add required to the input and select field then only the form is validated, but when i select any option then the error should be removed but validation error is there after i select value. I dont't want to add required to the fields for validation.

user3653474
  • 3,393
  • 6
  • 49
  • 135
  • *"then only the form is validated"* - Completely unclear what the problem is. Having `required=""` attribute on the fields will force the plugin to make those fields required, which you say you do not want - without even explaining why you don't want. Your custom rule for the `select` element makes no sense since it's already the default behavior of the `required` rule on a `select`. Finally, the name attribute must be unique on every field. You cannot have two or more fields with `subject[]`... they must contain an index or the validation plugin is only going to validate the first one. – Sparky Jun 25 '20 at 18:59
  • See same behavior without all the custom code: https://jsfiddle.net/zrajd8vw/ As far as the message not disappearing when you make a selection, that's another issue. Without digging into it, you can work around it with a `change` event handler: https://jsfiddle.net/zrajd8vw/1/ – Sparky Jun 25 '20 at 19:34
  • @Sparky, Thanks i have added a working example in the above question, Please check there are multi dimensional arrays subject[ETET][], but only first one is validated,Is there any way to check only the first word eg. all the field that have subject will get validated, because it is dynamic and i will not be able to get the key too – user3653474 Jun 26 '20 at 10:19
  • You'll need unique names on all the fields or this plugin will not work. There is no workaround. Without unique names, the plugin cannot keep track of the fields properly. – Sparky Jun 26 '20 at 15:48

0 Answers0