Я пытаюсь проверить элемент html select, используя плагин jQuery Validate. Я установил правило "required" в true, но он всегда проходит проверку, потому что нулевой индекс запускается по умолчанию. Есть ли способ определить пустое значение, которое используется требуемым правилом?
UPD. Пример. Представьте, что у нас есть следующий элемент управления html:
<select>
<option value="default">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Я хочу, чтобы плагин Validation использовал значение по умолчанию как пустое.
Вы можете написать свое собственное правило!
// 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!" }
}
});
Ниже представлено более простое решение: Подтвердить поле выбора
Сделайте значение пустым и добавьте требуемый атрибут
<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>
самое простое решение
просто установите значение первой опции для пустого value="" строки value=""
<option value="">Choose...</option>
и проверка JQuery required правило will work
использовать правило min
установить значение первого параметра в 0
'selectName':{min:1}
Вам нужно только поставить validate[required] в качестве класса этого select, а затем поставить опцию со значением = ""
например:
<select class="validate[required]">
<option value="">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Я не знаю, как был плагин, когда был задан вопрос (2010), но сегодня я столкнулся с такой же проблемой и решил так:
Дайте вашему тегу select атрибут имени. Например, в этом случае
<select name="myselect">
Вместо работы с атрибутом value = "default" в опции тега отключите параметр по умолчанию или установите value = "", как было предложено Andrew Coats
<option disabled="disabled">Choose...</option>
или
<option value="">Choose...</option>
Задайте правило проверки плагинов
$( "#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><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 $
Решение, упомянутое @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 должно работать в обычных случаях.
Это просто, вам нужно получить значение поля "Выбор", и оно не может быть "по умолчанию".
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;
}
});
});
<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>
значение выбора будет пустым
html
<select class="design" id="sel" name="subject">
<option >- 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**
$(document).ready(function() {
if($("#sel").val() == null){
alert('select a value)
}
});