1

我正在使用 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>

我想显示这样的错误

在此处输入图像描述

4

5 回答 5

6

正如有人已经提到的那样，您可能应该考虑使用外部库进行验证。也就是说，这似乎可行（参见 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;
});
于 2013-10-19T10:50:52.020 回答
1

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

$("#submit").click(function(event) {
  event.preventDefault();
  if($(this).val().length === 0) {
    // display some error  
  } else {
    $("#myid").submit();
  }
});
于 2013-10-19T10:47:05.803 回答
1

真的，我建议您使用一些框架进行表单验证。因为这是常见的任务，并且之前已经完成了 100000 次。它有很多，例如Parsley或Jquery 插件，但还有很多其他的简单且易于维护，只需 google 'javascript form validation'

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

于 2013-10-19T10:52:54.653 回答
0

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

于 2013-10-19T11:06:54.567 回答
-1

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

于 2013-10-19T10:49:16.753 回答