JQuery Form With Validation

JQuery Form With Validation

You can use Jquery to validate form and if form is invalid you can prevent default actions. In this tutorial I will show you how to validate form fields especially all input fields. I need all input text fields to be a mandatory fields. Any one of those fields it kept blank can stop submission of form. First let’s look at the script.

JQuery validate all input text example

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
        $("#Submit1").click(function(event){
        
        var isValidFlag = true;
            
            $("input:text").each(function(){
            
                if($(this).val()=='')
                {
                    isValidFlag = false;
                }           
                            
             });           
             
            if(!isValidFlag)
                {               
                    event.preventDefault();   
                    $("#errorMessage").html("<b>All fields are mandetory.</b>")
                }
            
           });
        
        });        
    
        
    </script>

Description I’m finding the submit button by it’s ID.

Syntax

$("#Submit1")

On click of button click event, I’m checking validation logic.

To get all input elements of type text you can use below syntax.

$(“input:text”).each();

.each function iterates the collection of input text boxes. If there is any input textbox found to be blank or empty, I have logic to prevent default execution of user form action.

Jquery example of making all input text boxes as mandatory fields.

<html>
<head>
    <title>JQuery all input text mandatory</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript" language="javascript"> 
   
       $("document").ready(function(){
       
        $("#Submit1").click(function(event){
        
        var isValidFlag = true;
            
            $("input:text").each(function(){
            
                if($(this).val()=='')
                {
                    isValidFlag = false;
                }           
                            
             });           
             
            if(!isValidFlag)
                {               
                    event.preventDefault();   
                    $("#errorMessage").html("<b>All fields are mandetory.</b>")
                }
            
           });
        
        });        
    
        
    </script>

</head>
<body>
    <form action="http://www.google.com?q=Satalaj">
    <div id="errorMessage" ></div>
        <input id="Text4" type="text" />
        <input id="Text1" type="text" />
        <input id="Text2" type="text" />
        <input id="Text3" type="text" />
        <input id="Text5" type="text" />
        <input id="Text6" type="text" />
        <input id="Submit1" type="submit" value="submit" />
    </form>
</body>
</html>

There is div element with errorMessage as an ID. I’m finding it using JQuery if it’s invalid to submit form.

.html() attaches message to div unobtrusively. Isn’t it a clean code with JQuery script?

Copy the complete code  above into notepad and save. Run the file inside browser to see input fields are mandatory. Once you fill the form you will be redirected to google website page. As google url is set to an action of the form submission.

DateTimeTryParse with IFormatProvider culture information using c#Learning JqueryBasics of jqueryJQuery SlideJQuery Animate Div Height and WidthJquery Trim StringIFormatProvider DateTime C#.netGoogle JQuery CDNformsauthenticationticketHow to call function in JQueryAsp.net JQuery Calendar Control

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.