선택 상자 유효성 검사

선택 상자 유효성 검사

---

jQuery 플러그인 유효성 검사 를 사용하여 양식의 유효성 을 검사하고 있습니다. 다음과 같은 선택 목록이 있습니다.

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

이제 사용자가 "옵션 선택"(기본 옵션) 이외의 항목을 선택했는지 확인하고 싶습니다. 따라서 첫 번째 옵션을 선택하면 유효성을 검사하지 않습니다. 어떻게 할 수 있습니까?

---

선택에 필요한 클래스를 추가하십시오.

<select id="select" class="required">

---

우선, 사용자가 실수로 선택하지 않도록 옵션을 "비활성화"할 수 있습니다.

<option value="" disabled="disabled">Choose an option</option>

그런 다음 JavaScript 이벤트 내에서 (jQuery 또는 JavaScript인지 여부는 중요하지 않음) 양식이 설정되었는지 확인하려면 다음을 수행하십시오.

select = document.getElementById('select'); // or in jQuery use: select = this;
if (select.value) {
  // value is set to a valid option, so submit form
  return true;
}
return false;

또는 그 효과에 대한 것.

---

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

1. 선택 태그에 이름 속성을 지정하십시오. 예를 들어이 경우

   <select name="myselect">

2. 태그 옵션에서 value = "default"속성으로 작업하는 대신 Jeremy Visser가 제안한대로 기본 옵션을 비활성화하거나 value = ""를 설정합니다.

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

   또는

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

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

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

   또는

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

Obs : redsquare의 솔루션은 양식에 하나만 선택한 경우에만 작동합니다. 그의 솔루션이 둘 이상의 선택으로 작동하도록하려면 선택 항목에 이름 속성을 추가하십시오.

도움이 되었기를 바랍니다. :)

---

<select id='bookcategory' class="form-control" required="">
                    <option value="" disabled="disabled">Category</option>
                    <option value="1">LITERATURE & FICTION</option>
                    <option value="2">NON FICTION</option>
                    <option value="3">ACADEMIC</option>
            <option value="4">CHILDREN & TEENS</option>

                </select>

HTML 양식 유효성 검사는 브라우저에서 자동으로 수행 할 수 있습니다. 위의 코드를 시도해보십시오
. 나머지는 모두 자동으로 수행되며이 드롭 다운과 제출 버튼 만 있으면 js 함수를 만들 필요가 없습니다.

---

if (select == "") {
    alert("Please select a selection");
    return false;

그것은 당신을 위해 일할 것입니다. 그것은 나를 위해 그랬습니다.

---

아마도 더 짧은 방법이 있지만 이것은 나를 위해 작동합니다.

<script language='JavaScript' type='text/javascript'>
    function validateThisFrom(thisForm) {
        if (thisForm.FIELDNAME.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME.focus();
            return false;
        }
        if (thisForm.FIELDNAME2.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME2.focus();
            return false;
        }
    }
</script>
<form onSubmit="return validateThisFrom (this);">
    <select name="FIELDNAME" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
    <select name="FIELDNAME2" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
</form>

---

you want to make sure that the user selects anything but "Choose an option" (which is the default one). So that it won't validate if you choose the first option. How can this be done?

You can do this by simple adding attribute required = "required" in the select tag. you can see it in below code

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

It worked fine for me at chorme, firefox and internet explorer. Thanks

---

   <script type="text/JavaScript">  
function validate() 
{
if( document.form1.quali.value == "-1" )
   {
     alert( "Please select qualification!" );
     return false;
   }
}

</script>
<form name="form1" method="post" action="" onsubmit="return validate(this);">
<select name="quali" id="quali" ">
        <option value="-1" selected="selected">select</option>
        <option value="1">Graduate</option>
        <option value="2">Post Graduate</option>
      </select> 
</form>





// this code works 110% tested by me after many complex jquery method validation but it is simple javascript method plz try this if u fail in drop down required validation//

ReferenceURL : https://stackoverflow.com/questions/1271640/validate-select-box