提交的表单带有空值

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)&nbsp;{您应该捕获表单提交事件：$($form).submit(function&nbsp;(e)&nbsp;{

Answer 2

尝试修复 HTML，因为它目前有点倾斜，并且会在 HTML 验证器中显示一些错误。<form name="ff" id="ff">&nbsp; &nbsp; &nbsp;<label for="Name" style="font-family: sans-serif;">Name*:</label>&nbsp;&nbsp; &nbsp; &nbsp;<input id="Name" type="text" placeholder="Please enter your name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="name" required/>&nbsp; &nbsp; &nbsp;<label for="Email" style="font-family: sans-serif;">Email*:</label>&nbsp; &nbsp; &nbsp;<input id="Email" type="email" placeholder="Enter your Email ID"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="email"&nbsp; required/>&nbsp; &nbsp; &nbsp;<label for="Mobile" style="font-family: sans-serif;">Mobile Number *:</label>&nbsp; &nbsp; &nbsp;<input id="Mobile" type="text" placeholder="Enter Your Number"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="mobile" maxlength="10" required/>&nbsp; &nbsp; &nbsp;<label&nbsp; &nbsp; for="Message" style="font-family: sans-serif;">Message*:</label>&nbsp; &nbsp; &nbsp;<textarea id="Message" name="message" cols="500"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;placeholder="Message" required></textarea>&nbsp; &nbsp; &nbsp;<input id="Contact_Btn" class="sendButton" type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Submit" value="Send"/></form>如果标签不包含有效的 for 属性，该属性与元素的 id 区分大小写匹配，那么这将在 Javascript 控制台中导致错误。这也可能会阻止或阻止所需属性的内置表单验证。尝试让我知道。还要考虑一下，如果您将必需的内容放在文本区域上，那么您可能需要指定该字段所需的最小和最大字符数，但不能 100% 确定这一点，您可能需要在 W3c 或 Mozilla 开发者网络上查找该部分..

Answer 3

这在纯 JS 中是如此简单......const myForm = document.forms.ffmyForm.onsubmit=e=>&nbsp; {&nbsp; e.preventDefault()&nbsp; let data = {}&nbsp; Array.from(new FormData(myForm), (entry) => { data[ entry[0] ] = entry[1]} )&nbsp; console.log(data)&nbsp; // localStorage.setItem('order', JSON.stringify(data))&nbsp; // console.log(localStorage.getItem('order'))&nbsp; // window.location.replace("./contactbooking.html")&nbsp; }<form name="ff" >&nbsp; <label>Name*:</label>&nbsp; <input type="text" placeholder="Please enter your name" name="name" required ><br>&nbsp; <label>Email*:</label>&nbsp; <input type="email" placeholder="Enter your Email ID" name="email" required ><br>&nbsp; <label> Mobile Number *:</label>&nbsp; <input type="text" placeholder="Enter Your Number" name="mobile" maxlength="10" required ><br>&nbsp; <label>Message*:</label>&nbsp; <textarea name="message" cols="500" placeholder="Message" required></textarea><br><br>&nbsp; <button class="sendButton" type="submit" >Send</button></form>