当动作点击是提交时，提交按钮消息没有被脚本触发

Submit button message not fired with script when action click is submit

本文关键字：提交 消息 脚本 按钮      更新时间：2023-09-26

我想有一个脚本来验证一个名为Email的字段是否为空。我创建了一个脚本，放在SCRIPTS文件夹中。但是，当我们单击Create按钮时，什么也不会触发。知道这有什么问题吗?由于

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

}

你的代码有语法错误，缺少#和点击绑定错误:

$("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>

使用这个，您在ID选择器中缺少#，并且您缺少绑定事件

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

我会在@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();
        }
    });
});

下面一行需要修改:

$("#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.");
           }
        });
     });
演示

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

中的Create。我将.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.");
       }
     });
  });
相关文章：