Yêu cầu xác thực jQuery Chọn

Tôi đang cố gắng xác thực phần tử chọn html bằng cách sử dụng plugin Xác thực jQuery. Tôi đặt quy tắc "bắt buộc" thành đúng nhưng nó luôn vượt qua xác thực vì chỉ số 0 được chọn theo mặc định. Có cách nào để xác định giá trị trống được sử dụng theo quy tắc bắt buộc không?

CẬP NHẬT. Thí dụ. Hãy tưởng tượng chúng ta có điều khiển html sau:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Tôi muốn plugin Xác thực sử dụng giá trị "mặc định" là trống.

Bạn có thể viết quy tắc của riêng bạn!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

Một giải pháp dễ dàng hơn đã được nêu ra ở đây: Xác thực hộp chọn

Làm cho giá trị trống và thêm thuộc tính cần thiết

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

giải pháp đơn giản nhất

chỉ cần đặt giá trị của tùy chọn đầu tiên thành chuỗi rỗng value=""

<option value="">Choose...</option>

và quy tắc xác thực jquery requiredwill work

sử dụng quy tắc tối thiểu

đặt giá trị tùy chọn đầu tiên thành 0

'selectName':{min:1}

Bạn chỉ cần đặt validate[required]làm lớp của lựa chọn này và sau đó đặt tùy chọn với value = ""

ví dụ:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Tôi không biết plugin là gì khi câu hỏi được hỏi (2010), nhưng tôi đã đối mặt với cùng một vấn đề ngày hôm nay và giải quyết nó theo cách này:

1. Cung cấp cho thẻ chọn của bạn một thuộc tính tên. Ví dụ trong trường hợp này

   <select name="myselect">

2. Thay vì làm việc với thuộc tính value = "default" trong tùy chọn thẻ, hãy tắt tùy chọn mặc định hoặc đặt value = "" theo đề xuất của Andrew Coats

   <option disabled="disabled">Choose...</option>

   hoặc là

   <option value="">Choose...</option>

3. Đặt quy tắc xác thực plugin

   $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

   hoặc là

   <select name="myselect" class="required">

Quan sát: Giải pháp của Andrew Coats chỉ hoạt động nếu bạn chỉ có một lựa chọn trong biểu mẫu của mình. Nếu bạn muốn giải pháp của anh ấy hoạt động với nhiều hơn một lựa chọn, hãy thêm thuộc tính name vào lựa chọn của bạn.

Hy vọng nó giúp! :)

Đây là ví dụ đơn giản và dễ hiểu:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

chọn giá trị sẽ để trống

Thật đơn giản, bạn cần lấy giá trị trường Chọn và nó không thể là "mặc định".

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

Giải pháp được đề cập bởi @JMP hoạt động trong trường hợp của tôi với một chút sửa đổi: Tôi sử dụng element.valuethay vì valuetrong addmethod.

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

Có thể là tôi có một trường hợp đặc biệt ở đây, nhưng không tìm ra nguyên nhân. Nhưng giải pháp của @ JMP nên hoạt động trong các trường hợp thông thường.

Làm thế nào để xác thực chọn "Qualifica" nó có 3 chọn

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});