如何在表单中使用克隆函数后使用java脚本验证

Question

如何在表单

中使用克隆功能后使用java脚本验证

如何在我在克隆中使用的java脚本中的每一行进行单独验证，以便添加更多功能，但我无法对每一行进行验证。这是什么？

帮帮我

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>

我希望每行或每次创建这种类型的验证，所以请帮帮我..

Answer 1

我把这个放了，但如果我在一个文本字段中写入，每个验证都会消失..

$(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

我将submit_login更改为submitLogin（）。我不知道你想如何验证它们，但这会抓取所有适当的<input>标签。

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

编辑：我的错。我在＆＃34; toValidate＆＃34;的四个输入中添加了一个类。这样我们可以通过类抓取所有输入元素，忽略前两个（通过在索引2处启动for循环）并验证其余元素。我会做类似的事情：

           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");
                }
            }

该代码未经测试，但我认为它有效或非常接近。

Answer 3

试试这个

 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'); 
    });
});   

}