提交的表单带有空值

Question

我在网站中使用表单，如果提交空白表单，用户应该收到错误警报。我使用下面的 HTML 和 JS 将表单数据转换为 JSON 并将其提交到电子邮件 API。但即使对于空白值，表单也会被提交，这是不应该发生的。请帮我解决这个问题。TIA。<form name="ff" id="ff">  <label style="font-family: sans-serif;"></label> Name*:  <input type="text" placeholder="Please enter your name" name="name" id="name" required />  <label style="font-family: sans-serif;">    Email*:    <input type="email" placeholder="Enter your Email ID" name="email" id="email" required />  </label>  <label style="font-family: sans-serif;">    Mobile Number *:    <input type="text" placeholder="Enter Your Number" name="mobile" id="mobile" maxlength="10" required />  </label>  </label>  <label style="font-family: sans-serif;">    Message*:    <textarea name="message" id="message" cols="500" placeholder="Message" required></textarea>  </label>  <input id="contactbtn" class="sendButton" type="submit" name="Submit" value="Send" /></form>function getFormData($form) {  var unindexed_array = $form.serializeArray();  var indexed_array = {};  $.map(unindexed_array, function (n, i) {    indexed_array[n['name']] = n['value'];  });  return indexed_array;}var $form = $("#ff");$('#contactbtn').click(function (e) {  e.preventDefault();  var data = getFormData($form);  console.log(data);  localStorage.setItem('order', JSON.stringify(data));  console.log('order');  window.location.replace("./contactbooking.html");});

Answer 1

而不是做：

$('#contactbtn').click(function(e) {

您应该捕获表单提交事件：

$($form).submit(function (e) {

Answer 2

尝试修复 HTML，

因为它目前有点倾斜，

并且会在 HTML 验证器中显示一些错误。

<form name="ff" id="ff">

     <label for="Name" style="font-family: sans-serif;">Name*:</label> 

     <input id="Name" type="text" placeholder="Please enter your name"

            name="name" required/>

     <label for="Email" style="font-family: sans-serif;">Email*:</label>

     <input id="Email" type="email" placeholder="Enter your Email ID"

            name="email"  required/>

     <label for="Mobile" style="font-family: sans-serif;">Mobile Number *:</label>

     <input id="Mobile" type="text" placeholder="Enter Your Number"

            name="mobile" maxlength="10" required/>

     <label    for="Message" style="font-family: sans-serif;">Message*:</label>

     <textarea id="Message" name="message" cols="500"

               placeholder="Message" required></textarea>

     <input id="Contact_Btn" class="sendButton" type="submit"

            name="Submit" value="Send"/>

</form>

如果标签不包含有效的 for 属性，该属性与元素的 id 区分大小写匹配，那么这将在 Javascript 控制台中导致错误。这也可能会阻止或阻止所需属性的内置表单验证。尝试让我知道。

还要考虑一下，如果您将必需的内容放在文本区域上，那么您可能需要指定该字段所需的最小和最大字符数，但不能 100% 确定这一点，您可能需要在 W3c 或 Mozilla 开发者网络上查找该部分..

Answer 3

这在纯 JS 中是如此简单......

const myForm = document.forms.ff

myForm.onsubmit=e=>

  {

  e.preventDefault()

  let data = {}

  Array.from(new FormData(myForm), (entry) => { data[ entry[0] ] = entry[1]} )

  console.log(data)

  // localStorage.setItem('order', JSON.stringify(data))

  // console.log(localStorage.getItem('order'))

  // window.location.replace("./contactbooking.html")

  }

<form name="ff" >

  <label>Name*:</label>

  <input type="text" placeholder="Please enter your name" name="name" required ><br>

  <label>Email*:</label>

  <input type="email" placeholder="Enter your Email ID" name="email" required ><br>

  <label> Mobile Number *:</label>

  <input type="text" placeholder="Enter Your Number" name="mobile" maxlength="10" required ><br>

  <label>Message*:</label>

  <textarea name="message" cols="500" placeholder="Message" required></textarea><br><br>

  <button class="sendButton" type="submit" >Send</button>

</form>