时间戳

首页 > 解决方案 > 即使字段为空且不遵循模式，提交按钮也会调用 javascript 函数

javascript - 即使字段为空且不遵循模式，提交按钮也会调用 javascript 函数

问题描述

我是 JavaScript 新手。我在一个包含一些文本字段的 html 文件中有一个表单。当有人单击提交按钮时，会调用一个 JavaScript 函数来完成一些工作（在本例中是一个简单的警报）。它可以按我的意愿工作，当我填写文本字段并单击提交按钮时，它会调用 JavaScript 函数并且该函数会显示警报。但是，问题是，当用户单击提交按钮时，某些字段为空和/或不遵循电子邮件地址的模式，它会调用 JavaScript 函数（即使 HTML 5 已在表单中显示警告）。我希望只有在没有 HTML 警告的情况下才应该调用 JavaScript 函数，我的意思是没有空字段并且用户必须遵循电子邮件模式。谢谢您的帮助。
HTML 代码：

<form id="myForm" method="post" role="form" class="contactForm">
                     
    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                            
    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                            
    <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
                            
    <button id="submitFormData" onclick="SubmitFormData();" type="submit" class="button button-a button-big button-rouded">Send Message</button>

</form>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="alert.js"></script>

Javascript 代码（alert.js）：

function SubmitFormData() {
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

    alert("SHOW SOMETHING HERE");
}

标签： javascripthtmljquery

解决方案

您可以在输入中使用required属性，还有一件事您可以调用 SubmitFormData() onsubmit 表单，这是您修改后的代码：

function SubmitFormData() {
  var name = $("#name").val();
  var email = $("#email").val();
  var message = $("#message").val();
  alert("SHOW SOMETHING HERE");
}
<form id="myForm" method="post" role="form" class="contactForm" onsubmit="SubmitFormData();">

  <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>

  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required/>

  <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message" required></textarea>

  <button id="submitFormData" type="submit" class="button button-a button-big button-rouded">Send Message</button>

</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>

推荐阅读