Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to validate a form on submit?

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 414
    Comment on it

    Whenever we create a form, we always have a requirement to put validation for empty fields on some input fields on form submit. For this we use onSubmit attribute of the form, inside which we can define a function that will have validations.

    Example: In the below example I have created a function validateForm() and created onSubmit event on form and called this function inside that. The validateForm() function checks whether the input field is empty or not

    <html>
        <head>
        <title>Demo to put validation on Form</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
        $(function(){
    
            $('input[type="text"]').on("focus",function() {
                var id = $(this).attr("id");
                if(id == "emailId")
                {
                    if($(this).val() == "")
                {
                    $('#validemailId_error').text("");
                }
                }
                else if(id == "firstName")
                {
                    if($(this).val() == "")
                {
                    $('#validfirstName_error').text("");
                }
            }
        });
    
        });
    
        function validateForm()
        {
            var valid = true;
            if($("#emailId").val() == "")
            {
                $('#validemailId_error').text("You can't leave this empty.");
                valid = false;
            }
            if($("#firstName").val() == "")
            {
                $('#validfirstName_error').text("You can't leave this empty.");
                valid = false;
            }
            return valid;
        }
        </script>
        <style>
        .error{color: #db4437;font-size:14px;}
        </style>
        </head>
        <body>
        <form id="createAccount" class="form-horizontal" method="post" onSubmit="return validateForm();">
        <div class="form-group form-group-space">
        <label for="inputEmail3" class="col-xs-4 control-label">First Name*</label>
        <div class="col-xs-8">
        <input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name">
        <span id="validfirstName_error" class="error"></span>
        </div>
        </div>
        <div class="form-group form-group-space">
        <label for="inputEmail3" class="col-xs-4 control-label">Email*</label>
        <div class="col-xs-8">
        <input type="text" name="emailId" id="emailId" class="form-control" placeholder="Email">
        <span id="validemailId_error" class="error"></span>
        </div>
        </div>
        <div class="form-group form-group-space">
        <div class="col-xs-8">
        <input type="submit" value="Submit">
        </div>
        </div>
        </form>
        </body>
        </html>
    

    Hope thi will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: