form validation only works using type=button but not type=submit?

StackOverflow https://stackoverflow.com/questions/21396952

Question

Im trying to figure out why this validation script only works using button type="button" but not with type="submit", please see the code below, I tryed different versions of jquery, yet no luck.. Im guessing it has something to do with the checkMandatoryFieldsAndSubmit

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<style>
.unset{
    border: 1px solid red
}
</style>
<body>

<div style="color: # 666; display: none; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center;"  id="error">Complete all highlighted mandatory fields</div> 

    <form action="http://www.aol.com" method="post">
    <input name="carname" type="text" value="" class="mandatory_field" />
    <button type="button" onclick="checkMandatoryFieldsAndSubmit()"/> Submit </button>
    </form>

</body>
</html>

<script>
function checkMandatoryFieldsAndSubmit(){
var error = false;
 $.map($('.mandatory_field'), function(element){
    //error = false;

    if ($(element).attr('type') == "text"){
      if ($(element).val() == ""){
        error = true;
        $(element).parent().addClass('unset');
      }else{
        $(element).parent().removeClass('unset');
      }
    }

    if ($(element).attr('type') == "checkbox"){    
      if ($(element).attr('checked') == false){
        error = true;
        $(element).parent().addClass('unset');
      }else{
        $(element).parent().removeClass('unset');
      }
    }

    if ($(element).attr('type') == "radio"){
      var radio_error = true;

      //check all having the same name!
      var name = $(element).attr('name');
      $('input[name="'+name+'"]').each(function(index){
        if (radio_error){
          if ($(this).attr('checked') == false){           
            radio_error = true;
          }else{
            radio_error = false;
          }
        }
      });

      if (radio_error){
        error = true;
        $(element).parent().addClass('unset');
      }else{
        $(element).parent().removeClass('unset');
      }
    }       
  });

  if (!error){
    $('name=')
    $('#form').submit();
  }else{
    $('#error').show();
  }
}

function addValue(check, element, value){
  //if checked will add value to the hidden 
  if ($(check).is(':checked')){
    checkVal = $(check).val();
    val = $('#'+element).val();
    if (val.indexOf(checkVal) == -1){
      val += ' '+checkVal;
      $('#'+element).val(val);
    }
  }
  //if checked will add value to the hidden 
  else{
    checkVal = $(check).val();
    val = $('#'+element).val();
    if (val.indexOf(checkVal) != -1){
      val = val.replace(checkVal, '');
      $('#'+element).val(val);
    }
  }
}
</script>
Was it helpful?

Solution

If you are using type="submit" then if the validation fails, you need to stop the default action by returning false from the validation method. and changing the event handler to

<button type="submit" onclick="return checkMandatoryFieldsAndSubmit()"/> Submit </button>

then

function checkMandatoryFieldsAndSubmit() {
    var error = false;
    $.map($('.mandatory_field'), function (element) {
        //error = false;

        if ($(element).attr('type') == "text") {
            if ($(element).val() == "") {
                error = true;
                $(element).parent().addClass('unset');
            } else {
                $(element).parent().removeClass('unset');
            }
        }

        if ($(element).attr('type') == "checkbox") {
            if ($(element).attr('checked') == false) {
                error = true;
                $(element).parent().addClass('unset');
            } else {
                $(element).parent().removeClass('unset');
            }
        }

        if ($(element).attr('type') == "radio") {
            var radio_error = true;

            //check all having the same name!
            var name = $(element).attr('name');
            $('input[name="' + name + '"]').each(function (index) {
                if (radio_error) {
                    if ($(this).attr('checked') == false) {
                        radio_error = true;
                    } else {
                        radio_error = false;
                    }
                }
            });

            if (radio_error) {
                error = true;
                $(element).parent().addClass('unset');
            } else {
                $(element).parent().removeClass('unset');
            }
        }
    });

    if (!error) {
        $('#form').submit();
    } else {
        $('#error').show();
    }
    //return the valid state here
    return !error;
}

Demo: Fiddle

Also I would recommend using onsubmit event instead of onclick event

<form action="http://www.aol.com" method="post" id="myform" onsubmit="return checkMandatoryFieldsAndSubmit()">
    <input name="carname" type="text" value="" class="mandatory_field" />
    <button type="submit">Submit</button>
</form>

Demo: Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top