web-dev-qa-db-fra.com

soumettre le formulaire après validation jquery

J'ai le formulaire suivant:

<form id="form" action="comments.php" method="post">
  <ul>
    <li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li>
    <li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li>
    <li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

et suivant JQuery pour la soumission du formulaire:

target: '#preview', 
  success: function() { 
  $('#formbox').slideUp('fast'); 
}

Maintenant, le problème est que j'ai aussi le code JQuery de validation de formulaire

$().ready(function() {
    // validate comment form
    $("#form").validate({ 
    });
});

Les deux fonctionnent parfaitement et le formulaire affiche un message avertissant que les trois champs ne peuvent pas être vides, mais que la date à l'intérieur du formulaire est soumise à la base de données. J'utilise le code suivant pour la validation du formulaire http://bassistance.de/jquery-plugins/jquery-plugin-validation/ La question est donc de savoir comment ajouter le premier jquery en seconde, le premier sera donc exécuté une fois les champs obligatoires sont remplis?

J'espère que quelqu'un va aider. Merci.

jqueryformsvalidationform-submit
9
DigitalWhirl LLC

Si vous souhaitez soumettre le formulaire manuellement, vous devez contourner l'événement lié à jQuery. Vous pouvez le faire de l'une des manières suivantes:

$('#form_id')[0].submit();

ou

$('#form_id').get(0).submit();

[0] ou get (0) vous donne l'objet DOM au lieu de l'objet jQuery.  

13
Francisco Goldenstein

D'après votre exemple, le flux de contrôle de votre page ne me semble pas clair. Toutefois, je suppose que vous appelez la méthode submit() quelque part. Après avoir validé le formulaire et avant de l'envoyer, vérifiez qu'il est validé avec la méthode valid(). Votre code devrait ressembler à quelque chose comme ça:

$("#form").validate();
if ($('#form').valid())
    $('#form').submit();
11
Abbas

Je ne sais rien de votre plugin de validation, mais normalement vous pourriez utiliser cette paix de code

<script>

    $("form").submit(function() {
      if (validationIsTrue()) {
        return true;
      }
      else {
        return false;
      }
    });
</script>

Vous devez valider puis renvoyer true/false à la fonction d'envoi du formulaire. Si le plugin renvoie une valeur bool, vous pouvez essayer quelque chose comme ceci:

$("form").submit(function() {
   return $(this).validate({ .... });
});
4
Grrbrr404

Lorsque vous dites que la "date dans le formulaire est soumise", cela n'a aucun sens pour moi car dans vos extraits de code, je ne vois rien appelé "date". 

J'ai beaucoup utilisé le plugin .validate () ... Ce que je peux vous dire, c'est que le plugin validate que vous utilisez a une fonction submitHandler que vous pouvez utiliser ...

// validate comment form
$("#form").validate({
submitHandler : function(form) {
    //do something here
    form.submit();
}
});

SubmitHandler est appelé uniquement si toutes les règles de validation sont respectées. Dans votre cas, vous avez trois champs avec "requis", ce qui signifie que ce formulaire ne sera PAS soumis à moins que les trois champs aient une valeur.

Cela dit, je peux vous dire avec certitude qu’avec les informations fournies, rien n’indique le problème que vous décrivez. Fournir plus d'informations de meilleure qualité nous aidera à comprendre ce qui ne va pas.

2
kasdega

Vous pouvez utiliser le plugin submitHandler de JQuery pour valider le formulaire.

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(".form").validate({
        rules: {
            userName: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            userName: {
                required: "specify userName"
            },
            password: {
                required: "specify password"
            }
        },
        errorClass: "help-inline text-danger",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        },
        submitHandler: function(form,e) {
            e.preventDefault();
            console.log('Form submitted');
            $.ajax({
                type: 'POST',
                url: 'authenticate.jsp',
                dataType: "html",
                data: $('form').serialize(),
                success: function(result) {
                    window.location.href = "dashboard.jsp";
                },
                error : function(error) {

                }
            });
            return false;
        }
    });

});  
</script>
0
Raju