聯繫表允許空白表單提交

我有一個PHP的聯繫表格上我的網站，我使用Zurb基金會與恪守，以確保完成的表格。如果我通過表單字段跳過，錯誤消息出現，但它仍然允許提交空白和/或不完整的形式。有沒有辦法阻止提交，除非有完整的表格？聯繫表允許空白表單提交

編輯拿到的代碼示例正確顯示

HTML：

<div class="small-12 medium-6 columns" id="form-right"> 
    <form id="myForm" data-abide="ajax"> 
     <div class="contactform"> 
      <div class="name-field"> 
      <label>Your name <small>required</small> 
      <input id="name" type="text" required pattern="[a-zA-Z]+"> 
      <small class="error">Hi I'm Parker. What's your name?</small> 
      </label> 
      </div> 
      <div class="email-field"> 
      <label>Email <small>required</small> 
      <input id="email" type="email" required> 
      <small class="error">Oops, you forgot your email.</small> 
      </label> 
      </div> 
      <div class="text-field"> 
      <label>Message <small>required</small> 
      </label> 
      <textarea id="message" required></textarea> 
      <small class="error">I see you're the quiet type. How about a short message?</small> 
      </div> 
      <!--<button type="submit">Submit</button>--> 
      <input type="submit" name="sendbutton" id="sendbutton" class="sendbutton button radius" value="Submit" /> 
     </div> 
     </form> 
    </div>

JS：

<script>  
$('#myForm') 
.on('submit', function() { 
var name = $("input#name").val(); 
var email = $("input#email").val(); 
var message = $("textarea#message").val(); 

//Data for response 
var dataString = 'name=' + name + 
    '&email=' + email + 
    '&message=' + message; 

//Begin Ajax call 
$.ajax({ 
    type: "POST", 
    url:"php/mail.php", 
    data: dataString, 
    success: function() { 
     $('.contactform').html("<div id='thanks'></div>"); 
      $('#thanks').html("<h2>Thanks!</h2>") 
      .append("<p>Glad to hear from you "+ name +"! I'll be in touch soon.</p>") 
      .hide() 
      .fadeIn(1500); 
    }, 
    }); //ajax call 
    return false; 
}); 
</script>

來源

2014-11-04 pixel_priest

閱讀文檔：http://foundation.zurb.com/docs/components/abide.html

$('#myForm').on('valid.fndtn.abide', function() { 
    // Handle the submission of the form 
});

來源

2014-11-04 23:27:53 dave

感謝@戴夫！我閱讀文檔幾次，但種種原因錯過了該網頁。正在關閉表單文檔。感謝您的幫助，現在就像魅力一樣。 – 2014-11-05 02:43:16

在JavaScript中，VA lidate你的變量在生成dataString前：

var name = $("input#name").val(); 
var email = $("input#email").val(); 
var message = $("textarea#message").val(); 

if (name && email && message) { 

    // Continue from here 

} else { 

    // Display a warning 
}

你可能想看看http://jqueryvalidation.org/用於在客戶端驗證更多的東西，即爲電子郵件地址。

來源

2014-11-04 23:29:04

聯繫表允許空白表單提交

回答

相關問題