jquery validation error during form submit

Question

I have made a script like this

$("#submit_butt").click(function(){
        $("#error_messgae").html('');
        //alert($("#deal_description").val().length);

            if($("#deal_name").val()=="") {
                var deal = "<li class='err-msg'>Deal Name is Blank</li>" ;
                $("#error_messgae").html(deal);
                $("#deal_name").css({'border':'1px solid red'});
            } else {
                $("#deal_name").css({'border':''});
            } if($("#deal_price").val()==""){
                var price = "<li class='err-msg'>Deal Price is Blank</li>" ;
                $("#error_messgae").append(price);
                $("#deal_price").css({'border':'1px solid red'});
            }if(isNaN($("#deal_price").val())){
                var price_num = "<li class='err-msg'>Deal Price Should be a Number</li>" ;
                $("#error_messgae").append(price_num);
                $("#deal_price").css({'border':'1px solid red'});
            } else {
                $("#deal_price").css({'border':''});
            }  if($("#category").val()==""){
                var category = "<li class='err-msg'>Category is Blank</li>" ;
                $("#error_messgae").append(category);
                $("#category").css({'border':'1px solid red'});
            } else {
                $("#category").css({'border':''});
            }  if($("#deal_description").val()==""){
                var description = "<li class='err-msg'>Deal Description is Blank</li>" ;
                $("#error_messgae").append(description);
                $("#deal_description").css({'border':'1px solid red'});
            } if($("#deal_description").val().length<120){
                var description_new = "<li class='err-msg'>Deal Description Should be more the 120 Characters</li>" ;
                $("#error_messgae").append(description_new);
                $("#deal_description").css({'border':'1px solid red'});
            }  else {
                $("#deal_description").css({'border':''});
            }  if($("#deal_instructions").val()==""){
                var instruction = "<li class='err-msg'>Deal Instruction is Blank</li>" ;
                $("#error_messgae").append(instruction);
                $("#deal_instructions").css({'border':'1px solid red'});
            } else {
                $("#deal_instructions").css({'border':''});
            } if($("#deal_tags").val()==""){
                var tags = "<li class='err-msg'>Deal Tags is Blank</li>" ;
                $("#error_messgae").append(tags);
                $("#deal_tags").css({'border':'1px solid red'});
            } else {
                $("#deal_tags").css({'border':''});
            } if($("#deal_days").val()==""){
                var deal_days = "<li class='err-msg'>Deal Days is Blank</li>" ;
                $("#error_messgae").append(deal_days);
                $("#deal_days").css({'border':'1px solid red'});
            } if($("#deal_days").val()!="" && isNaN($("#deal_days").val())){
                var deal_days_num = "<li class='err-msg'>Deal Days must be a Number</li>" ;
                $("#error_messgae").append(deal_days_num);
                $("#deal_days").css({'border':'1px solid red'});
            } else {
                $("#deal_days").css({'border':''});
            } 


    });

Now I want to submit my form when everything is OK. how to do it?

why not use validate.js ? rickharrison.github.com/validate.js — 4b0
– 4b0, Commented Feb 11, 2013 at 9:53
are you asking what is wrong with your code? what is the expected behaviour, what is happening right now, what have you tried and what were the results? also please format that code, it's a PITA to read like that. a few linebreaks around the curly brackets woudln't go amiss :) — totallyNotLizards
– totallyNotLizards, Commented Feb 11, 2013 at 9:56
My problem is there is a space where I have to display the messgae. Which is Ok. But how can I submit the form after all checkings are OK — Roger
– Roger, Commented Feb 11, 2013 at 10:00

nick_w · Accepted Answer · 2013-02-11 10:04:58Z

1

What seems to be missing from your code is some indication of whether the validation has succeeded ot not.

Given your current code, I would place a variable var validated = true; at the beginning of your click handler, then set it to false each time one of your validation checks fails. For example:

var validated = true;

....

if($("#deal_name").val()=="") {
    var deal = "<li class='err-msg'>Deal Name is Blank</li>" ;
    $("#error_messgae").html(deal);
    $("#deal_name").css({'border':'1px solid red'});
    validated = false;
}

At the end of your click handler you would then return validated;. If validated is false, the submission won't occur, and vice-versa.

I am assuming that the submit button is intended to trigger the actual submission of the form. If not, you would need to handle this appropriately.

answered Feb 11, 2013 at 10:04

nick_w

15k3 gold badges55 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipesh Parmar · Accepted Answer · 2013-02-11 10:08:23Z

0

Instead of submit button click event you can change it as below,

Sample example is as below.

$('#FORM_ID').submit(function(){
   //validation code.
});

OR

$(function()
{
    //we bind to the form instead of the form button
    //using .on() (jQ1.7+)
    $('#FORM_ID').on('submit', function(e)
    {
        //prevent form submission

        e.preventDefault();

        //do validation stuff

        this.submit();
    });
});

OR

$(document).ready(function()
{
    $('#submitBtn').click(function (e)
    {
        e.preventDefault();
        // Do validation stuff...  
        $('#FORM_ID').submit();
    });
});

You can also use jQuery.validate plugin which also handle form submission.

Take a look at this Example

edited Feb 11, 2013 at 10:08

answered Feb 11, 2013 at 9:53

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

4 Comments

Frédéric Hamidi Over a year ago

That submit handler doesn't return anything, and preventDefault() is never called, so the form will always be submitted whether or not the fields are valid.

Roger Over a year ago

I know I can use ajax but this is a modification work and I have to just make the checking and submit the form

Dipesh Parmar Over a year ago

if u don't wanna change code then just use $('#FORM_ID').submit(function(){ //validation code. });

Dipesh Parmar Over a year ago

please now check updated answer one out of three alternative will help.

Jai · Accepted Answer · 2013-02-11 10:10:05Z

You can try this one:

$("#submit_butt").click(function(){
   if($(':text').val()=='' && $('textarea').val()==''){ // all other inputs too
       if($("#deal_name").val()=="") {
            var deal = "<li class='err-msg'>Deal Name is Blank</li>" ;
            $("#error_messgae").html(deal);
            $("#deal_name").css({'border':'1px solid red'});
        } else {
            $("#deal_name").css({'border':''});
        } if($("#deal_price").val()==""){
            var price = "<li class='err-msg'>Deal Price is Blank</li>" ;
            $("#error_messgae").append(price);
            $("#deal_price").css({'border':'1px solid red'});
        }if(isNaN($("#deal_price").val())){
            var price_num = "<li class='err-msg'>Deal Price Should be a Number</li>" ;
            $("#error_messgae").append(price_num);
            $("#deal_price").css({'border':'1px solid red'});
        } else {
            $("#deal_price").css({'border':''});
        }  if($("#category").val()==""){
            var category = "<li class='err-msg'>Category is Blank</li>" ;
            $("#error_messgae").append(category);
            $("#category").css({'border':'1px solid red'});
        } else {
            $("#category").css({'border':''});
        }  if($("#deal_description").val()==""){
            var description = "<li class='err-msg'>Deal Description is Blank</li>" ;
            $("#error_messgae").append(description);
            $("#deal_description").css({'border':'1px solid red'});
        } if($("#deal_description").val().length<120){
            var description_new = "<li class='err-msg'>Deal Description Should be more the 120 Characters</li>" ;
            $("#error_messgae").append(description_new);
            $("#deal_description").css({'border':'1px solid red'});
        }  else {
            $("#deal_description").css({'border':''});
        }  if($("#deal_instructions").val()==""){
            var instruction = "<li class='err-msg'>Deal Instruction is Blank</li>" ;
            $("#error_messgae").append(instruction);
            $("#deal_instructions").css({'border':'1px solid red'});
        } else {
            $("#deal_instructions").css({'border':''});
        } if($("#deal_tags").val()==""){
            var tags = "<li class='err-msg'>Deal Tags is Blank</li>" ;
            $("#error_messgae").append(tags);
            $("#deal_tags").css({'border':'1px solid red'});
        } else {
            $("#deal_tags").css({'border':''});
        } if($("#deal_days").val()==""){
            var deal_days = "<li class='err-msg'>Deal Days is Blank</li>" ;
            $("#error_messgae").append(deal_days);
            $("#deal_days").css({'border':'1px solid red'});
        } if($("#deal_days").val()!="" && isNaN($("#deal_days").val())){
            var deal_days_num = "<li class='err-msg'>Deal Days must be a Number</li>" ;
            $("#error_messgae").append(deal_days_num);
            $("#deal_days").css({'border':'1px solid red'});
        } else {
            $("#deal_days").css({'border':''});
        } 
   }else{
       // if passed then submit
      $('form').submit();
   }
});

What about the textarea ? Also I have multiple fields. So where should I put the $('form').submit() ?
updated the answer and what kind of button you are using is it type=submit or type=button or <button>?

Collectives™ on Stack Overflow

jquery validation error during form submit

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related