web-dev-qa-db-fra.com

Comment appeler la validation sur un événement de clic de bouton qui n'est pas un type d'envoi, mais un type de bouton et sans formulaire?

J'ai essayé de comprendre cela, je sais que la validation peut être déclenchée dans un formulaire tant que le bouton est de type submit. Mais j'ai quelques autres onglets dans la vue et lorsque j'utilise submit, cela provoque un retour arrière et revient au premier onglet. Je ne veux pas que cela se produise, j'ai donc mis ma validation dans une fonction. J'ai remplacé le type de bouton par un bouton, supprimé la balise de formulaire et essayé d'appeler la fonction de validation sur l'événement de clic du bouton. Est-ce possible de faire sans utiliser une balise de formulaire?

Mon code est ce ...

    $(document).ready(function () {
    $("#btnUpdateModerator").click(function () {
        ValidateIt();
    });
    ValidateIt();
});
function ValidateIt() {
    var validator = $("#Users").bootstrapValidator({
        feedbackIcons: {
            valid: "glyphicon glyphicon-ok",
            invalid: "glyphicon glyphicon-remove",
            validating: "glyphicon glyphicon-refresh"
        },
        fields: {
            DealerUsername: {
                message: "Username is required",
                validators: {
                    notEmpty: {
                        message: "Please Provide Username"
                    }
                }
            },
            email: {
                message: "Email address is required",
                validators: {
                    notEmpty: {
                        message: "Please provide Email address"
                    },
                    emailAddress: {
                        message: "Email address was invalid"
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: "Password is required"
                    },
                    stringLength: {
                        min: 6,
                        message: "Password must be at least 6 characters long"
                    },
                    different: {
                        field: "email",
                        message: "Email and Password cannot match"
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: "Confirm Password is required"
                    },
                    identical: {
                        field: "password",
                        message: "Password and Confirmation Password must match"
                    }
                }
            },
            department: {
                validators: {
                    notEmpty: {
                        message: "Department is Required"
                    }
                }
            }
        }
    });
}
jqueryasp.net-mvcvalidationbootstrapvalidator
6
Chris

Je pense que vous devez conserver l'élément de formulaire, mais définissez le type de bouton sur "button" au lieu de "submit". Vous pouvez ensuite valider manuellement le formulaire à l'aide de la méthode "validate" du validateur de bootstrap.

En supposant que votre élément de formulaire ait la id de "Utilisateurs", vous devriez pouvoir modifier votre code en:

$(document).ready(function () {
    $("#btnUpdateModerator").click(function () {
        $('#Users').bootstrapValidator('validate');
    });
    ValidateIt();
});

Remarque: La fonction ValidateIt() telle que vous l'avez écrite ne valide pas le formulaire, elle configure le validateur sur le formulaire.

Note: Je pense que la documentation de l'API se trouve ici: http://bv.doc.javake.cn/api/

Mise à jour après votre commentaire sur la réalisation d'un appel ajax:

Si vous souhaitez effectuer un appel ajax lorsque vous cliquez sur le bouton, mais uniquement si le formulaire est valide, vous bénéficierez des fonctions suivantes:

    $("#btnUpdateModerator").click(function () {
        $('#Users').bootstrapValidator('validate');
        if ($('#Users').bootstrapValidator('isValid')) {
            // Make the ajax call here.
        }
    });

Une autre façon d'écrire ceci est:

    $("#btnUpdateModerator").click(function () {
        var validator = $('#Users').data('bootstrapValidator');
        validator.validate();
        if (validator.isValid()) {
            // Make the ajax call here.
        }
    });
12
John S

Je crois que le validateur bootstrap se lie à la méthode submit () d'un formulaire, son déplacement dans une fonction ne vous aidera pas réellement. Vous pouvez toutefois intercepter la méthode de soumission du formulaire et ne pas lui permettre de soumettre jusqu'à ce que vous le souhaitiez.

$("#myForm").submit(function(e){
    e.preventDefault(); // <-- prevents the form from submitting
    // do stuff
    this.submit() // <-- send it through
});
1
Mike S.