jQuery表單驗證器 - 至少一個輸入填充

-2

<form id="form" action="javascript:void(0);" onsubmit="ajax()"> 
    <div class="element"> 
     <label for="first_name">Фамилия</label> 
     <input type="text" id="first_name" class="text" name="first_name" /> 
    </div> 
    <div class="element"> 
     <label for="second_name">Имя</label> 
     <input type="text" id="second_name" class="text" name="second_name" /> 
    </div> 
    <div class="element"> 
     <label for="last_name">Отчество</label> 
     <input type="text" id="last_name" class="text" name="last_name" /> 
    </div> 
    <div class="element"> 
     <label for="course">На каком вы курсе</label> 
     <input type="text" id="course" class="text" name="course" /> 
    </div> 
    <div class="element"> 
     <label for="math">Математика</label> 
     <input type="text" id="math" class="text" name="math" /> 
    </div> 
    <div class="element"> 
     <label for="programming">Программирование</label> 
     <input type="text" id="programming" class="text" name="programming" /> 
    </div> 
    <div class="element"> 
     <label for="english">Английский язык</label> 
     <input type="text" id="english" class="text" name="english" /> 
    </div> 
    <div class="element"> 
     <label for="history">История</label> 
     <input type="text" id="history" class="text" name="history" /> 
    </div> 
    <div class="element"> 
     <input type="submit" id="send" class="send" /> 
    </div> 
</form>

這是我的驗證

$(document).ready(function(){ //Валидация формы 
    $(".send").validation(
     $("#first_name").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите корректное имя</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".name").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#second_name").validate({ 
      test: "blank email", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите корректный email</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".email").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#last_name").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите тему</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".subject").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#course").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите сообщение</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".message").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#math").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите сообщение</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".message").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#programming").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите сообщение</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".message").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#english").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите сообщение</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".message").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }), 
     $("#history").validate({ 
      test: "blank", 
      invalid: function(){ 
       if($(this).nextAll(".error").notExists()) { 
        $(this).after('<div class="error">Введите сообщение</div>'); 
        $(this).nextAll(".error").delay(2000).fadeOut("slow"); 
        setTimeout(function() { 
         $(".message").next(".error").remove(); 
        }, 2600); 
       } 
      }, 
      valid: function(){ 
       $(this).nextAll(".error").remove(); 
      } 
     }) 
    ); 
});

是必需的fiels FIRST_NAME，SECOND_NAME，姓氏，當然。其他人（數學，程序設計，歷史，英語）他們也是必需的，但其中只有一個，我的意思是如果他們中的任何一個被填充，它通過驗證。我怎樣才能做到這一點？

來源

2013-11-23 user3005741

使用[jquery validate]（http://jqueryvalidation.org/），您可以大幅幹起代碼。 –

我已經在使用jquery驗證了！ – user3005741

在這種情況下，將您的設置應用於'form'元素，而不是單獨輸入每個輸入。 –

您的代碼：

$(document).ready(function() { 
    $(".send").validation( // < -- what is this? 
     $("#first_name").validate({ 
      test: "blank",   // <-- no such option 
      invalid: function() { // <-- no such option 
       .... 
      }, 
      valid: function() { // <-- no such option 
       .... 
      } 
     }); 
     $("#second_name").validate({ 
      ...... 
     }); 
    ); 
});

你的代碼是真正打破。你不能從稀薄的空氣中彌補插件的選擇;他們需要在之前由插件的開發人員定義，您可以使用它們。 1）如果你使用的是jQuery驗證插件，那麼爲什麼你所有的電話號碼都是.validate()？.validation()？什麼是.validation()應該是？這個插件沒有定義這樣的方法。

2）沒有這樣的jQuery Validate插件選項，名爲test。 See all options。

3）沒有這樣的jQuery Validate插件回調函數，名爲valid和invalid。使用highlight,unhighlight,errorPlacement和success回調函數來控制錯誤的放置和切換。

4）您不會將.validate()附加到表單上的每個輸入元素。它只附加到form元素，並且它只在DOM ready事件中被調用一次以初始化插件。

5）使用jQuery時，不需要任何內聯JavaScript，並且.ajax()屬於插件的submitHandler回調函數的內部。

我建議你...

閱讀online documentation

按照examples provided

閱讀the SO tag wiki

看標記jquery-validate各種做題的代碼。

否則，這裏是一個非常基本的工作例如：

HTML：

<form id="myform"> <input type="text" name="foo" /> <input type="text" name="bar" /> <input type="submit" /> </form>

jQuery的：

$(document).ready(function() { $('#myform').validate({ rules: { foo: { required: true }, bar: { required: true } }, submitHandler: function (form) { // ajax goes here return false; } }); });

DEMO http://jsfiddle.net/QKvB4/

後您解決一切，包括the additional-methods.js file並使用require_from_group方法，使至少一個領域，從一組字段，需要。

來源

2013-11-24 01:55:08 Sparky

jQuery表單驗證器 - 至少一個輸入填充

回答

相關問題