CODEWITHSUNDEEP
jqueryjquery-validate
Mr.M
Mr.M

Reputation: 1490

validation in clone not working using jquery

Working on validation in clone using jquery with my current code.

  1. If the user click next button initially without filling any of the mandatory field it was showing the error message You have missed 4 fields. Please fill before submitted.

  2. If the user click addmore button from the form if the user not filling any of the field it should alert message says success.

  3. If the user fill any one of the field in the clone if click next button it should says total You have missed 7 fields. Please fill before submitted..

  4. If the user click remove button then if user click the next button it should say You have missed 4 fields. Please fill before submitted.

With my current code i have achieved the first point but not 2,3,4 i am confused kindly please help me. I am struggling

here is the jquery code

$(document).ready(function () {  
$('.error_msge').hide();
 $("#basicForm").validate({
     onkeyup: false,
        showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();
        
        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
            $("#error_message").html(message);
            $(".error_msge").show();
        } else {
            $(".error_msge").hide();
        }
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false;
    },
    highlight: function (element) {
        
        if ($(element).is(':radio'))  {
           
        } else {
            $(element).addClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
    },
    unhighlight: function (element) {
        
        if ($(element).is(':radio')) {
        } else {
            $(element).removeClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');
        
    },
    
    rules: {
        txt_Jbt: "required",
        txt_Empl: "required",
        txt_Fdob: "required",
        txt_Tdob: "required"
    }
});

Here is the fidde Link

Kindly please help me

Thanks in advance

Upvotes: 1

Views: 1337

Answers (1)

Dave
Dave

Reputation: 4436

Check your code working in jsfiddle. Cloned elements had same value for name property <input name="**">. Validator was considering it as one field although they were different.In addition to this, I assigned rules based on class name. Let me know if this is your expected behaviour.

....
$clone.find('[id]').each(function () {
  this.id += '_' + $('.cloned-row3').length + 1 
  this.name += '_' + $('.cloned-row3').length + 1 
});
....

EDIT 1:

Working solution - jsfiddle

Upvotes: 1

Related Questions