Question

我想要一个脚本来验证名为Email的字段是否为空。我创建了一个脚本，我把它放在SCRIPTS文件夹中。但是，当我们单击“创建”按钮时，没有任何事知道这有什么问题吗？感谢

ValidationEmail.js

     $(function () {
        $("SubmitBTNCreate").click, function (e) {
           var email = $("#Email").val();
           if (email == "")  {
               e.preventDefault();
               alert("Please enter an email address.");
           }
        });
     });

Create.cshmtl

 @model codefirst.Models.Personne

 @{
    ViewBag.Title = "Create";
 }



 <h2>Create</h2>

 @using (Html.BeginForm()) {
 @Html.AntiForgeryToken()
 @Html.ValidationSummary(true)

 <fieldset>
    <legend>Personne</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Nom)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Nom)
        @Html.ValidationMessageFor(model => model.Nom)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Prenom)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Prenom)
        @Html.ValidationMessageFor(model => model.Prenom)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Email)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)   <== field to check if empty
    </div>

    <p>
       <input type="submit" value="Create" id="SubmitBTNCreate" />  <== btn submit
     </p>
 </fieldset>
 }

 <div>
    @Html.ActionLink("Back to List", "Index")
 </div>

 @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/ValidationEmail")   <== calling the script

}

Answer 1

您的代码有语法错误，缺少＃和点击绑定错误：

$("SubmitBTNCreate").click, function (e) {

我会把它重写为：

$(function () {
   $("#SubmitBTNCreate").click(function(e) {
      // use preventDefault() at top
      e.preventDefault();
      var email = $("#Email").val();
      // asking with shorter format works and looks better
      if (!email)  {
         alert("Please enter an email address.");
         return false;
      }
      // no errors, submit form by id you give it
      $("#yourFormId").submit();
   });
});

编辑：

包含问题可能会以这种方式解决：

<script src="@Url.Content("~/Scripts/ValidationEmail.js")"></script>

Answer 2

使用此功能，您在ID选择器中缺少#，并且您缺少对事件的绑定

 $(function () {
        $("#SubmitBTNCreate").bind('click', function (e) {
           var email = $("#Email").val();
           if (email == "")  {
               e.preventDefault();
               alert("Please enter an email address.");
           }
        });
     });

Answer 3

我会在@using (Html.BeginForm())中为您的表单提供一个ID，以便进行任何验证，您需要阻止表单在按钮点击时提交。所以你想要的是@using (Html.BeginForm(new { id = "emailForm" }))的内容。这将允许您从您的JavaScript中引用它。

有了这些，您就可以在javascript函数中修复bug。

$(document).ready(function() {
    // You're missing the # to tell jQuery you're looking by ID
    // You also had a ',' instead of a '('
    $("#SubmitBTNCreate").click( function (e) {
        // The very first thing you need to do is prevent the default 
        // because it will fire off asynchronously.
        if (e.preventDefault) {
            e.preventDefault();
        }
        // Also allow for IE8
        else {
            e.returnValue = false;
        }

        var email = $("#Email").val();
        if (email == "")  {
            alert("Please enter an email address.");
        }
        else {
            // If you have no validation errors, submit the form.
            $("#emailForm").submit();
        }
    });
});

Answer 4

以下行需要修复：

$("#SubmitBTNCreate").on("click", function (e) {
// ^id selector       ^ use on() to bind event listener

完整代码

   $(function () {
        $("#SubmitBTNCreate").on("click", function (e) {
           var email = $("#Email").val();
           if (email == "")  {
               e.preventDefault();
               alert("Please enter an email address.");
           }
        });
     });

DEMO

Answer 5

我终于在你的帮助下找到了问题。

在Create.cshtml中我将.js添加到脚本名称

 @Scripts.Render("~/Scripts/ValidationEmail.js")

在脚本中，我错过了#SubmitBTNCreate

前面的“＃”

Validation.js

  $(function () {
     $("#SubmitBTNCreate").on("click", function (e) {
       var email = $("#Email").val();
       if (email == "") {
           e.preventDefault();
           alert("Please enter an email address.");
       }
     });
  });

或者这也有效

      $(function () {
     $("#SubmitBTNCreate").click ( function (e) {
       var email = $("#Email").val();
       if (email == "") {
           e.preventDefault();
           alert("Please enter an email address.");
       }
     });
  });

提交操作单击时，提交未通过脚本触发的按钮消息

5 个答案: