如何在提交时检查输入字段是否为空

Question

我正在使用jQuery，所以我想知道如果输入字段为空，只有在我点击提交按钮后才能显示错误信息。

在代码下面，我的简单表单如何应用它。

<form id="myid" name="myid" method="post" action="hook.php">

name : <input type="text" name="name" id="name">

age : <input type="text" name="age" id="age">

<input type="submit" id="submit" name="submit" value="Save" />

</form>

我想像这样显示错误

Answer 1

正如某人已经提到的那样，您可能应该使用外部库进行验证。也就是说，这似乎可能有效(see JSFiddle)：

var $form = $("#myid"),
    $errorMsg = $("<span class='error'>This field is required..!!</span>");

$("#submit").on("click", function () {
    // If any field is blank, we don't submit the form
    var toReturn = true;
    $("input", $form).each(function () {
        // If our field is blank
        if ($(this).val() == "") {
            // Add an error message
            if (!$(this).data("error")) {
                $(this).data("error", $errorMsg.clone().insertAfter($(this)));
            }
            toReturn = false;
        }
        // If the field is not blank
        else {
            // Remove the error message 
            if ($(this).data("error")) {
                $(this).data("error").remove();
                $(this).removeData("error");
            }
        }
    });
    return toReturn;
});

Answer 2

您可以使用event.preventDefault来停止发生的默认操作。然后检查您的情况，如果条件失败则显示错误，如果没有则提交表格。

$("#submit").click(function(event) {
  event.preventDefault();
  if($(this).val().length === 0) {
    // display some error  
  } else {
    $("#myid").submit();
  }
});

Answer 3

我建议您使用一些框架进行表单验证。因为这是常见的任务，之前已经完成了100000次。有很多内容，例如Parsley或Jquery plugin，但还有很多其他内容很简单且易于维护，只需谷歌“javascript格式验证”

为什么在这种情况下已经实现了比自定义更好的代码：1）它已经编写，测试和工作，2）你几乎从不需要只进行单一验证，并且确实为几个参数验证表单可能是一个挑战并且可能导致对于大量的验证代码3）框架是DRYer和其他很多东西。

Answer 4

我还建议您使用验证框架，因为您需要对不同字段进行更多验证。使用MooTools Floor这是最可靠的验证框架。 MooTool Floor

Answer 5

您可以在输入标记中使用HTML5 required='required'选项...