在表单中使用克隆功能后如何使用Java脚本验证

Question

how to use java script validation in after using the clone function in a form

how can do separate validation in each row in java script i used in clone for add more function but i can't do validation for every row.how is this ?

help me

 var i = 0; function cloneRow() { var row = document.getElementById("clone"); var table = document.getElementById("data"); var selectIndex = 1; var clone = row.cloneNode(true); table.appendChild(clone); clone.setAttribute("style", ""); } function deleteRow(btn) { var result = confirm("Do you Want to delete this ?"); if (result) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } } 

  <div class="row"> <div class="col-sm-12"> <div class="col-sm-7"></div> <div class="col-sm-2"> <button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button> </div> </div> </div><br><br> <div class="row" id ="close"> <div class="col-sm-4"></div> <div class='col-sm-4'> <Form id="NAME_VALUE" method="POST" > <table class="table-striped" > <tbody id="data"> <tr id ="clone" style="display:none;"> <td> Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> </td> <td> Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> </td> <td> <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this); return false;"> <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span> </button> </td> </tr> <tr> <td> Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> </td> <td> Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> </td> <td> <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this); return false;"> <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button> </td> </tr> </tbody> </table><br> <button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login(); return false;"> save.</button> </Form> </div> </div> 

I lioke to create this type of validation every row or tr so please help me..

Answer 1

I put this one but if i write in one text field every validation gone..

 $(document).ready($.validator.addMethod("valueNotEquals", function (value, element, arg) { return arg != value; }, "Value must not equal arg.")); $(function () { $("#NAME_VALUE").validate({ errorClass: "validation-error-class", // Specify the validation rules rules: { INPUT_NAME: { required: true, maxlength: 64 }, INPUT_VALUE: { required: true, maxlength: 64 } }, // Specify the validation error messages messages: { INPUT_NAME: { required: "[your name ?]", maxlength: "[Your name cannot exceed 64 characters]" }, INPUT_VALUE: { required: "[ value ?]", maxlength: "[Your password cannot exceed 64 characters]" } }, errorElement: "div", wrapper: "div", errorPlacement: function (error, element) { error.appendTo(element.parent("td")); error.css('color', 'red'); error.css('text-align', 'center'); } }); }); function submit_login( ) { if ($("[id='name'],[id='value']").valid()) { alert("Successfully saved"); } } 

Answer 2

I changed submit_login to submitLogin(). I didn't know how you wanted to validate them, but this grabs all the appropriate <input> tags.

           function submitLogin() {
                var fieldsToValidate = document.getElementsByClassName('toValidate');
                for (var i = 2; i < fieldsToValidate.length; i++) {
                    console.log(fieldsToValidate[i]);
                    // Do validation here
                }
            }

Edit: My fault. I added a class to the four inputs of "toValidate". That way we can grab all the input elements by their class, ignore the first two (by starting the for loop at index 2) and validate the rest. I would do something like:

           function submitLogin() {
                var fieldsToValidate = document.getElementsByClassName('toValidate');
                var blankFieldsCount = 0;
                for (var i = 2; i < fieldsToValidate.length; i++) {
                    if (fieldsToValidate[i].value == "null") {
                        blankFieldsCount++;
                    }
                }
                if (blankFieldsCount >= 1) {
                    alert("You must fill out all fields");
                }
            }

That code is untested, but I think it works or it is really close.

Answer 3

try like this

 function bind_validation(){
    $(".required_field ").each(function(){
        $(this).rules("add", { 
            required:true,
        });
    });
    addRemoveCloneValidation();
}

function addRemoveCloneValidation(){
$('div[id^="added"]').each(function(index, item){
   var needsValidation = false;
    $.each($(item).find('.required_field'), function(index, item){                      
        if($(item).val()) 
            needsValidation = true; 
        $(item).change(addRemoveCloneValidation);
    });
    $.each($(item).find('.required_field'), function(index, item){ 
        $(item).rules("add", { 
            required:needsValidation,
        });
        if(!needsValidation)
           $(item).removeClass('errRed'); 
    });
});   

}