jQuery Valider, de deux champs vides, au moins un des champs doit être rempli ou les deux

Je veux valider mon formulaire qui est en dehors des deux champs vides, au moins un des champs doit être rempli et deux champs peuvent être remplis; mais peut pas laisser un champ vide.

Je suis en utilisant jquery-1.9.1-min.js et voici ma page html.

<form action="#" class="send_form" id="forgot_pass_form" method="POST">
            <fieldset>
                <div class="send_row">
                    <label class="padding-top10">Email</label>
                    <input type="text" class="send_email" id="email" name="email" />
                    <em>You need to type an email address</em>
                </div>

                <div class="send_row option">OR</div>

                <div class="send_row">
                    <label class="padding-top10">Username</label>
                    <input type="text" class="send_username" id="uname" name="uname" />
                </div>


                <div class="send_row send_submitforgotuser">
                    <input type="submit" value="Submit" />
                </div>
            </fieldset>
            </form>

Toute suggestion comment le faire.... ?

jusqu'à présent, j'ai essayé

 jQuery.validator.addMethod("require_from_group", function(value, element, options) {
    alert("xxx");
    var valid = $(options[1], element.form).filter(function() {
        return $(this).val();
    }).length >= options[0];

    if(!$(element).data('reval')) {
        var fields = $(options[1], element.form);
        fields.data('reval', true).valid();
        fields.data('reval', false);
    }
    return valid;
}, jQuery.format("'Please enter either username/email address to recover password'/Please fill out at least {0} of these fields."));

Toujours pas à obtenir friutful de sortie.

Avez-vous inclus les jQuery Valider plugin? Depuis que vous utilisez validator.addMethod(), cela nécessite que le jQuery Valider plugin être compris et correctement configuré.
Merci de ne pas abuser par l'affichage en double questions: Validate(en termes de champ vide) aucun un deux champs de jquery 1.9.1.min

OriginalL'auteur bigZero | 2013-02-28

jquery jquery-validate

Vous tentez d'utiliser validator.addMethod qui fait partie de le jQuery Valider plugin. Vous aurez besoin d'inclure ce plugin dans votre code si vous ne l'avez pas déjà.

Puis utilisez le require_from_group règle qui fait déjà partie de la validation du plugin additional-methods.js fichier. (N'oubliez pas d'inclure le additional-methods.js fichier trop.)

rules: {
    myfieldname: {
        require_from_group: [1, ".class"]
    }
}

Premier paramètre est le nombre d'éléments nécessaires.
Deuxième paramètre est le class attribué à tous les éléments de votre groupement. J'ai ajouté un send de la classe à vos deux éléments d'entrée.
Également utiliser le groupes de regrouper les deux messages en un seul.

jQuery:

$(document).ready(function () {

    $('#forgot_pass_form').validate({ //initialize the plugin
        groups: {  //consolidate messages into one
            names: "uname email"
        },
        rules: {
            uname: {
                require_from_group: [1, ".send"]
            },
            email: {
                require_from_group: [1, ".send"]
            }
        }
    });

    // for your custom message
    jQuery.extend(jQuery.validator.messages, {
        require_from_group: jQuery.format("'Please enter either username/email address to recover password'/Please fill out at least {0} of these fields.")
    });

});

De Travail De Démonstration: http://jsfiddle.net/sgmvY/1/

MODIFIER: Comme par Github, il y a un problème avec le require_from_group méthode. Jusqu'à ce qu'il fixe, le développeur recommande cette solution ci-dessous. Puisque vous devrez ajouter manuellement la version révisée de la méthode dans votre code, il n'est pas nécessaire d'inclure le additional-methods.js fichier.

Nouveau Travail De Démonstration: http://jsfiddle.net/kE7DR/2/

$(document).ready(function () {

    jQuery.validator.addMethod("require_from_group", function (value, element, options) {
        var numberRequired = options[0];
        var selector = options[1];
        var fields = $(selector, element.form);
        var filled_fields = fields.filter(function () {
            //it's more clear to compare with empty string
            return $(this).val() != "";
        });
        var empty_fields = fields.not(filled_fields);
        //we will mark only first empty field as invalid
        if (filled_fields.length < numberRequired && empty_fields[0] == element) {
            return false;
        }
        return true;
        //{0} below is the 0th item in the options field
    }, jQuery.format("'Please enter either username/email address to recover password'/Please fill out at least {0} of these fields."));

    $('#forgot_pass_form').validate({ //initialize the plugin
        groups: {
            names: "uname email"
        },
        rules: {
            uname: {
                require_from_group: [1, ".send"]
            },
            email: {
                require_from_group: [1, ".send"]
            }
        }
    });



});

désolé pour la réponse tardive,....merci pour votre réponse.Juste une chose : puis-je écrire cela comme une fonction, puis il sera appelé dans un jquery de validation. comme 1>function validateUser() puis 2> à l'intérieur de $(document).ready(function() { // validateUSer(); }
est seulement de savoir comment le plugin est initialisé. Il n'y a pas vraiment d'intérêt à le mettre à l'intérieur d'une autre fonction. Si vous voulez de test de la validité de votre formulaire à l'intérieur d'une fonction, il suffit de l'utilisation valid() en tout temps après l'initialisation du plugin.

OriginalL'auteur Sparky

@Sparky je suis en train d'utiliser votre réponse afin de valider la mise à jour d'un nom de Compte et/ou Mot de passe. - Je entrer à l'origine, le Nom de Compte et Mot de passe, puis cliquez sur le bouton de mise à jour et la validation de l'origine du nom de Compte et le Mot de passe est effectuée (c'est à dire, pas de message pour dire que un nouveau Compte ou Mot de passe doit être entré). Mon code est:

$(document).ready(function(){
$.validator.addMethod(
"regex",
function(value, element, regexp) 
{
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},
"Please enter correct Characters."
);
jQuery.validator.addMethod("require_from_group", function (value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var fields = $(selector, element.form);
var filled_fields = fields.filter(function () {
//it's more clear to compare with empty string
return $(this).val() != "";
});
var empty_fields = fields.not(filled_fields);
//we will mark only first empty field as invalid
if (filled_fields.length < numberRequired && empty_fields[0] == element) {
return false;
}
return true;
//{0} below is the 0th item in the options field
}, jQuery.format("'Please enter either a new Account name and/or a new password'/Please fill out at least {0} of these fields."));
$('[data-toggle="tooltip"]').tooltip();
$("#contactForm").validate({
groups: {  //consolidate messages into one
names: "accountName1 enterPassword1"
},
rules: {
accountName: {
required: true,
minlength: 2
},
enterPassword: {
required: true,
minlength: 8
},
accountName1: {
require_from_group: [1, ".send"],
minlength: 2
},
accountName2: {
minlength: 2,
equalTo: "#accountName1"
},
enterPassword1: {
require_from_group: [1, ".send"],
regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
minlength: 8
},
enterPassword2: {
regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
minlength: 8,
equalTo: "#enterPassword1"
}
},
messages: {
accountName: {
required: "Please enter your current account name.",
minlength: "Your account name must consist of at least 2 characters."
},
enterPassword: {
required: "Please enter your current password.",
minlength: "Your password must consist of at least 8 characters."
},
accountName1: {
minlength: "Your account name must consist of at least 2 characters."
},
accountName2: {
minlength: "Your account name must consist of at least 2 characters.",
equalTo: "Your confirmation account name does not match the original."
},
enterPassword1: {
regex: "Please nter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..",
minlength: "Your password must consist of at least 8 characters."
},
enterPassword2: {
regex: "Please enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..",
minlength: "Your password must consist of at least 8 characters.",
equalTo: "Your confirmation password does not match the original."
}
},
submitHandler : function(contactForm) {
//do something here
var frm = $('#contactForm');
//alert($("#accountName1").val());
$.ajax({
type: "POST",
url: "UpdateAccountView",
cache: false,
data: frm.serialize(),
success: function(data){
console.log('Submission was successful.');
console.log(data);
$("#accountName").focus();
$('#ajaxGetUserServletResponse').text(data);
}
});
}
});      
}); //end document.ready

OriginalL'auteur Glyn

Vous devez vous connecter pour publier un commentaire.