表单验证只能使用 type=button 而不是 type=submit？答案

【问题标题】：form validation only works using type=button but not type=submit?表单验证只能使用 type=button 而不是 type=submit？
【发布时间】：2014-02-19 05:47:43
【问题描述】：

我想弄清楚为什么这个验证脚本只能使用按钮 type="button" 而不是 type="submit"，请参阅下面的代码，我尝试了不同版本的 jquery，但没有运气.. 我猜它与 checkMandatoryFieldsAndSubmit 有关

谢谢！

<!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>

【问题讨论】：

为了提高效率，您可以使用element = $(element); 并将所有后续对$(element) 的调用替换为element，每次运行验证时节省大量CPU 周期。

标签： javascript jquery forms validation form-submit

【解决方案1】：

如果您使用 type="submit" 那么如果验证失败，您需要通过从验证方法返回 false 来停止默认操作。并将事件处理程序更改为

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

然后

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;
}

演示：Fiddle

另外我建议使用onsubmit 事件而不是onclick 事件

<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>

演示：Fiddle

【讨论】：

语句 `$('#form').submit();` 也是完全多余的。只需返回false 以外的任何值以提交表单。