Question

我在我的网站上有一个PHP联系表格，我正在使用Zurb Foundation和Abide来确保填写表格。如果我跳过表单字段，则会出现错误消息，但仍然允许提交空白和/或不完整的表单。除非有完整的表格，否则有没有办法阻止提交？

编辑以正确显示代码示例

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>

Answer 1

阅读文档：http://foundation.zurb.com/docs/components/abide.html

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

Answer 2

在JavaScript中，在生成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/查看客户端上的更多验证内容，即i.E。用于电子邮件地址。

联系表格允许空白表格提交

2 个答案: