客户端验证根据按钮点击空文本框触发

我有4个文本框。我想根据bewlow标准进行验证： -客户端验证根据按钮点击空文本框触发

1）。如果第一个文本框的值不是空白，并且在该空白文本框上的其他部分比addclass错误是空白的。 2）。如果第二个文本框的值不为空，并且第1，第3和第4个文本框的值比该空白文本框上的添加类错误为空。 3）。如果前两个文本框的值不为空，并且另一个textox值在该空白文本框上为空白而不是addClass错误。 4）。如果第一个和第三个文本框的值不是空白，并且第二个和第四个文本框的值比该空白文本框上的addclass错误是空白的。如果在该空白文本框中，3个文本框的值不是空白，并且一个文本框的值比添加类错误空白。

这是我的jQuery验证码： -

$(".submit_data").click(function(){ 
    input1 = $("#data1").val(); 
    input2 = $("#data2").val(); 
    input3= $("#data3").val(); 
    input4= $("#data4").val(); 

    if(input1 == "" && input2 == "" && input3 == "" && input3 == "") 
    { 
     $(".data-form").addClass('required'); 
     $(".data-form").addClass('error'); 
     $(".new-data-form").addClass('required'); 
     $(".new-data-form").addClass('error'); 
    } 


    if(input1 != "" && input2 == "" && input3 == "" && input3 == "") 
    { 
     $("#data2").addClass("error"); 
     $("#data3").addClass("error"); 
     $("#data4").addClass("error"); 
     return false; 
    } 
});

HTML： - 此

<div id="painting_form" class="painting-form-wrap"> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label">Input 1</label> 
       <div class="col-sm-10"> 
       <input type="text" name="data1" value="" id="data1" class="form-control painting-form1"> 

       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-sm-2 control-label">Input 2</label> 
       <div class="col-sm-10"> 
       <input type="text" name="data2" value="data2" id="input-ceilheight" class="form-control painting-form1"> 

       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label">Input 3</label> 
       <div class="col-sm-10"> 
       <input type="text" name="data3" value="" id="data3" class="form-control painting-form1"> 

       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-sm-2 control-label">Input 4</label> 
       <div class="col-sm-10"> 
       <input type="text" name="data4" value="" id="data4" class="form-control painting-form1"> 

       </div> 
      </div> 
     </div>

来源

2016-05-14 Kim Jones

它只是意味着，如果任何文本框是不是在别人空白加入错误类，如果他们是空白... –

是@DharaParmar。 –

可以在这里发布html –

你可以通过所有的输入框环和检查，如果任何输入字段的填充值添加错误类的所有其他空的输入框。

试试这个：

$(document).ready(function() { 
$(".submit_data").click(function(){ 
    flag = 0; // check if eny input box is filled with value or not 
    $("input[type=text]").each(function() { 
     if($(this).val() != '') { 
      flag = 1; // set flag one if any of the inputbox has value entered 
     } 
    }); 
    if(flag == 0) { // if flag is 0 means all input are empty then remove error class from all inputs 
     $("input[type=text]").each(function() { 
      $(this).removeClass('required'); 
       $(this).removeClass('error'); 
     }); 
    } 
    if(flag == 1) { // if any of the input box is filled with value 
     $("input[type=text]").each(function() { 
      if($(this).val() == '') { 
       $(this).addClass('required'); // add error class to empty inputboxes 
       $(this).addClass('error'); 
      } else { 
       $(this).removeClass('error'); // remove error class if inputbox has value 
      } 
     }); 
    } 
    return false; 
}); 
});

来源

2016-05-14 09:11:54

使用jQuery验证插件。它实现起来快速简单。

会是这样的

$(form).validate()

如果你想添加一些规则，比如使用MINLENGTH /最大长度等。

// Try this 
$(form).validate(rules:{ 
    inputname: { 
    minlength: 8 
    } 
})

来源

2016-05-14 08:05:19

客户端验证根据按钮点击空文本框触发

回答

相关问题