jQuery 검증 필수 선택

jQuery 검증 필수 선택

jQuery Validate 플러그인을 사용하여 HTML 선택 요소의 유효성을 검사하려고 합니다."필수" 규칙을 true로 설정했지만 기본적으로 0 인덱스가 선택되어 있기 때문에 항상 유효성 검사를 통과합니다.필수 규칙에서 사용하는 빈 값을 정의할 수 있는 방법이 있습니까?

UPD. 예.다음과 같은 HTML 컨트롤이 있다고 가정해 보십시오.

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

Validation 플러그인에서 "default" 값을 빈 값으로 사용합니다.

보다 쉬운 솔루션이 여기에 설명되어 있습니다. 선택 항목 확인 상자

값을 비워두고 필요한 특성을 추가합니다.

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

여러분은 여러분만의 규칙을 쓸 수 있습니다!

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

가장 간단한 해결책

첫 번째 옵션의 값을 빈 문자열로 설정합니다.value=""

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

및 jquery 유효성required 검사 규칙will work

최소 규칙 사용

첫 번째 옵션 값을 0으로 설정

'selectName':{min:1}

당신은 단지 그것을 넣기만 하면 됩니다.validate[required]이 클래스로 선택한 다음 값으로 옵션을 지정합니다="

예:

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

질문을 받았을 때(2010년) 플러그인이 어땠는지는 모르겠지만 오늘도 같은 문제에 직면하여 다음과 같이 해결했습니다.

1. 선택한 태그에 이름 속성을 지정합니다.이 경우를 예로 들 수 있습니다.

   <select name="myselect">

2. 태그 옵션에서 속성 값="default"로 작업하는 대신 기본 옵션을 사용하지 않도록 설정하거나 Andrew Coats가 제안한 대로 값="을 설정합니다.

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

   또는

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

3. 플러그인 유효성 검사 규칙 설정

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

   또는

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

Obs: Andrew Coats의 솔루션은 양식에서 선택한 항목이 하나만 있을 때만 작동합니다.해당 솔루션을 둘 이상 사용하려면 선택한 항목에 이름 속성을 추가합니다.

도움이 되길 바랍니다! :)

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

선택 값이 비어 있습니다.

@JMP가 언급한 솔루션은 제 경우에 약간의 수정을 가하면서 작동했습니다.사용합니다element.value대신에value에서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!" }
    }  
});

제가 여기 특별한 사건을 가지고 있지만 원인을 추적하지 않았을 가능성이 있습니다.그러나 @JMP의 솔루션은 일반적인 경우에 작동해야 합니다.

이 방법은 간단합니다. Select 필드 값을 가져와야 하며 "default"일 수 없습니다.

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

선택한 "qualifica"를 유효하게 하는 방법 3가지 선택.

$(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;
        }
    });

});

언급URL : https://stackoverflow.com/questions/2901125/jquery-validate-required-select