jquery message for validation and submitting_问答_开发者

jquery message for validation and submitting

开发者 https://www.devze.com 2023-01-09 14:10 出处：网络

I am using the jquery to validate each field in my form and also using the jquery to sh开发者_StackOverflowow a \"loading\" message after submitting the form. Now, in my case I got confused when I cli

I am using the jquery to validate each field in my form and also using the jquery to sh开发者_StackOverflowow a "loading" message after submitting the form. Now, in my case I got confused when I clicked on the submit button the validation messages will be shown and also the loading message. I need only the loading message to be shown once everything is correct.

<html lang="en"> 
    <head> 
        <title>SO question 3377468</title> 
        <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
        <script> 
            $(document).ready(function() { 
                $('#form').submit(function() { 
                    $('#progress').show(); 
                }); 
            }); 
        </script> 
        <style> 
            #progress {  
                display: none; 
                color: green;  
            } 
        </style>             
    </head> 
    <body> 
        <form id="form" action="servlet-url" method="post"> 
            ... 
            <input type="submit"> 
        </form> 
        <div id="progress">Please wait...</div> 
    </body> 
</html>

How to show jquery message after clicking on submit button

I took this code when one of the colleagues had helped and now I want to complete this.

Nick's answer almost worked for me - but I think you also need to then submit the form ...

$(document).ready(function(){  
    $("#form").validate({  
        //other options...  
        submitHandler: function() {  
            $('#progress').show();   
            form.submit();  
        }  
    });  
});

If you're using the validation plugin (I'm unclear on this from the question, but it's tagged that way) just move your code around a bit. Instead of this:

$(document).ready(function() { 
    $('#form').submit(function() { 
        $('#progress').show(); 
    }); 
});

You'll want to use the submitHandler option of the plugin, this function only runs after a form has successfully passed validation and is being submitted, like this:

$("#form").validate({
  //other options...
  submitHandler: function() {
    $('#progress').show(); 
  }
});

This means just remove that first block of code, the submitHandler code is all you should have left for the #progress stuff.

Possibly something like:

<input type="button" value="SUBMIT" onclick="validateFunction()">

Then in your validateFunction, at the end if it is all good to go then call document.form.submit() which will process your loading dialog and send the form.

Also, as a side note, since you stated you are using jquery for validation, with your current setup a person with javascript disabled could still submit invalid data (causing all sorts of drop tables and whatnot). With this method (the submit being called within the script), they won't be able to send AT ALL.

Another route is:

<input type="submit" onclick="validateFunction();return false;">

And at the end of your validate function set it to return(true/false) if it is okay to send or not. THEN re-validate on the server side, using PHP or whatever and return an error if any problems. This allows users without javascript to still attempt to send but not have them destroy your site.