Comment créer une règle simple et personnalisée à l'aide du plug-in jQuery Validate (à l'aide de addMethod
) sans utiliser une expression régulière?
Par exemple, quelle fonction créerait une règle qui ne valide que si au moins un groupe de cases à cocher est coché?
Vous pouvez créer une règle simple en faisant quelque chose comme ceci:
jQuery.validator.addMethod("greaterThanZero", function(value, element) {
return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");
Et puis en appliquant ceci comme ceci:
$('validatorElement').validate({
rules : {
amount : { greaterThanZero : true }
}
});
Modifiez simplement le contenu de 'addMethod' pour valider vos cases à cocher.
$(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 }
});
Vous pouvez créer une règle personnalisée et l'attacher à un élément à l'aide de l'attribut data
à l'aide de la syntaxe data-rule-rulename="true";
.
Donc, pour vérifier si au moins un groupe de cases à cocher est coché:
data-rule-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");
Et vous pouvez également remplacer le message d'une règle (c'est-à-dire qu'au moins 1 doit être sélectionné) en utilisant la syntaxe data-msg-rulename="my new message"
.
NOTE
Si vous utilisez la méthode data-rule-rulename
, vous devez vous assurer que le nom de la règle est en minuscule. En effet, la fonction de validation jQuery dataRules
applique .toLowerCase()
à la comparaison et le HTML5 spec ne ne pas autoriser les majuscules.
Exemple de travail
$.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>
Merci, ça a fonctionné!
Voici le code final:
$.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");
Vous pouvez ajouter une règle personnalisée comme ceci:
$.validator.addMethod(
'booleanRequired',
function (value, element, requiredValue) {
return value === requiredValue;
},
'Please check your input.'
);
Et ajoutez-le en règle générale comme ceci:
PhoneToggle: {
booleanRequired: 'on'
}
Dans ce cas: formulaire d’inscription d’utilisateur, l’utilisateur doit choisir un nom d’utilisateur qui n’est pas utilisé.
Cela signifie que nous devons créer une règle de validation personnalisée, qui enverra une requête http asynchrone avec le serveur distant.
<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