我的网站上有一个 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>
最佳答案
阅读文档:http://foundation.zurb.com/docs/components/abide.html
$('#myForm').on('valid.fndtn.abide', function() {
// Handle the submission of the form
});
关于javascript - 允许提交空白表格的联系表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26745568/