亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

提交的表單帶有空值

提交的表單帶有空值

蠱毒傳說 2023-08-18 17:43:03
我在網站中使用表單,如果提交空白表單,用戶應該收到錯誤警報。我使用下面的 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");});
查看完整描述

3 回答

?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

而不是做:

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

您應該捕獲表單提交事件:

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


查看完整回答
反對 回復 2023-08-18
?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

嘗試修復 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 開發者網絡上查找該部分..


查看完整回答
反對 回復 2023-08-18
?
梵蒂岡之花

TA貢獻1900條經驗 獲得超5個贊

這在純 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>


查看完整回答
反對 回復 2023-08-18
  • 3 回答
  • 0 關注
  • 171 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號