客戶端驗證根據按鈕點擊空文本框觸發

我有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

客戶端驗證根據按鈕點擊空文本框觸發

回答

相關問題