✖

All TalkersCode Topics

Follow TalkersCode On Social Media

jQuery Validate Form Before Submit

Last Updated : Jan 1, 2023

IN - jQuery

jQuery Validate Form Before Submit

In this article we will show you the solution of jQuery validate form before submit, here we needs to use on(), test() and text() methods for achieve the result. The on() method attaches one or more event handlers for the selected elements and child element which is used for both current and future elements.

The test() method is a regular expression method. It searches a string for a pattern and returns true or false depends on result and test() method used for insert some texts on html elements.

Step By Step Guide On jQuery Validate Form Before Submit :-

Here we defined html block with form and div element for showing defined message on webpage then within form we defined two input elements for collects user name and email then at last defined submit button.

In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we defined on() method with user name and email input elements by specifying their id’s ‘inp,em’ separately for validation.

At user name on() method we collecting name input by using val() method with this keyword and it’s result stored on variable ‘name’ then we defined regular expression for name input which allows only characters and stored on variable ‘vn’.

Now we have to use if condition for check name length whether equal to ‘0’ then it throws respected error on webpage, else if condition checks user input with regular expression if they not match then respected error displays.

At last else we leaves div element ‘msg’ as empty by empty() method likewise we did for email input. 

<!DOCTYPE html>
<html>
    <head>
        <title>Add Required Attribute On Submit</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>
            $(document).ready(function (){
                        $('#sub').click(function(){
                            $('input').attr('required',true);
                            $('#err').text("Input Needed");
                        })
            })
        </script>
        </head>
        <body>
            <form>
                <input type="text" id="inp">
                <input type="submit" id="sub" value="Submit">
            </form>
            <div id="err"></div>
        </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. In script we defined ready() method within that we defined on() method which is appends with input element id ‘inp’ so which refers current element.
  8. There we pointing current input value by using this keyword and val() method then returned result value stored on variable ‘name’. The regular expression defined for user name input in the form of pattern and stored on variable ‘vn’ which refers it allows only characters.
  9. Then we checking name length whether ‘0’ or not, if returns true then we throwing message ‘Name is Required’ by using text() method if returns false then it checks else if condition whether user input not match with regular expression if returns true then it throws message ‘Only characters & whitespace allowed’ otherwise we leaves div element ‘msg’ as empty.
  10. Same as we doing for email input, on() method appends with input element id ‘em’ so which refers current element input. There we pointing current input value by using ‘this’ keyword and val() method then returned result value stored on variable ‘email’.
  11. The regular expression defined for user email id input in the form of pattern and stored on variable ‘ve’.
  12. Then we checking email length whether ‘0’ or not, if returns true then we throwing message ‘Email is Required’ by using text() method if returns false then it checks else if condition whether user input not match with regular expression if returns true then it throws message ‘Invalid Email’ otherwise we leaves div element ‘msg’ as empty.
  13. In html block we defined form with id ‘Myfrm’ within form we defined two input elements name and email id, submit type button for submits user response, at last div element with id ‘msg’.
  14. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to validate from input fields before submit in jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.

When we executes program on browser we can see name, email input fields and submit button, now user needs to fill input elements then clicks on submit button.

If user filling input field with wrong characters then respective error message will displayed at last otherwise it throws success message.

I hope this article on jQuery validate form before submit helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials