Как создать простое пользовательское правило с помощью плагина jQuery Validate (используя addMethod
), который не использует регулярное выражение?
Например, какая функция создала бы правило, которое проверяет, только если проверена хотя бы одна из групп флажков?
Вы можете создать простое правило, выполнив что-то вроде этого:
jQuery.validator.addMethod("greaterThanZero", function(value, element) {
return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");
И затем применяя это так:
$('validatorElement').validate({
rules : {
amount : { greaterThanZero : true }
}
});
Просто измените содержимое "addMethod", чтобы проверить свои флажки.
$(document).ready(function(){
var response;
$.validator.addMethod(
"uniqueUserName",
function(value, element) {
$.ajax({
type: "POST",
url: "http://"+location.host+"/checkUser.php",
data: "checkUsername="+value,
dataType:"html",
success: function(msg)
{
//If username exists, set response to true
response = ( msg == 'true' ) ? true : false;
}
});
return response;
},
"Username is Already Taken"
);
$("#regFormPart1").validate({
username: {
required: true,
minlength: 8,
uniqueUserName: true
},
messages: {
username: {
required: "Username is required",
minlength: "Username must be at least 8 characters",
uniqueUserName: "This Username is taken already"
}
}
});
});
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
return jQuery.validator.methods['date'].call(
this,value,element
)||value==("0000/00/00");
}, "Please enter a valid date."
);
// connect it to a css class
jQuery.validator.addClassRules({
optdate : { optdate : true }
});
Вы можете создать настраиваемое правило и прикрепить его к элементу с помощью атрибута data
, используя синтаксис data-rule-rulename="true";
Итак, чтобы проверить, проверена ли хотя бы одна из групп флажков:
данных правил oneormorechecked
<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />
addMethod
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
И вы также можете переопределить сообщение правила (то есть: Atleast 1 необходимо выбрать) с помощью синтаксиса data-msg-rulename="my new message"
.
Примечание
Если вы используете метод data-rule-rulename
, вам нужно убедиться, что имя правила имеет строчный регистр. Это связано с тем, что функция проверки jQuery dataRules
применяет .toLowerCase()
для сравнения, а HTML5 не допускает прописных букв.
Рабочий пример
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form class="validate">
red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
blue<input type="checkbox" name="colours[]" value="blue" /><br/>
green<input type="checkbox" name="colours[]" value="green" /><br/>
<input type="submit" value="submit"/>
</form>
Спасибо, это сработало!
Здесь последний код:
$.validator.addMethod("greaterThanZero", function(value, element) {
var the_list_array = $("#some_form .super_item:checked");
return the_list_array.length > 0;
}, "* Please check at least one check box");
Вы можете добавить настраиваемое правило следующим образом:
$.validator.addMethod(
"booleanRequired",
function (value, element, requiredValue) {
return value === requiredValue;
},
"Please check your input."
);
И используйте его следующим образом:
PhoneToggle: {
booleanRequired: 'on'
}
Надеюсь, что это поможет
Для этого случая: форма регистрации пользователя, пользователь должен выбрать имя пользователя, которое не было принято.
Это означает, что мы должны создать настраиваемое правило проверки, которое будет отправлять async http-запрос с удаленного сервера.
<input name="user_name" type="text" >
$("form").validate({
rules: {
'user_name': {
// here jquery validate will start a GET request, to
// /interface/users/is_username_valid?user_name=<input_value>
// the response should be "raw text", with content "true" or "false" only
remote: '/interface/users/is_username_valid'
},
},
class Interface::UsersController < ActionController::Base def is_username_valid render :text => !User.exists?(:user_name => params[:user_name]) end end
он работает отлично.