阻止表单提交
阻止表单提交
提问于 2012-01-27 06:18:03
我正在尝试使用jQuery阻止表单在某个文本区域未填写的情况下提交。但是，如果数据已经在数据库中，则不需要填充文本区域。我使用了以下代码，但jquery似乎不正确。
HTML和PHP：
<form id="form" action="page1.php" method="post">
<input type="textarea" name="name1" placeholder="<?= empty($val1)? 'Enter your val here': $val1 ?>" />
<p class="submit">
<input type="submit" value="Go!" />
</p>
</form>
<div id="log"></div>Javascript：
$("#form[input[placeholder='Enter your val here']]").submit(function(event) {
event.preventDefault();
$('<div/>')
.append('please enter the val first')
.appendTo('#log');
});
};回答 3
Stack Overflow用户
发布于 2012-01-27 06:21:40
如果您试图绑定到窗体的onsubmit事件，那么您的选择器似乎有点问题。选择器的结果现在可能是空的，因为它是一个无效的选择器。你可能想做的是：
$("#form input[placeholder='Enter your val here']")...但实际上，你所需要的是：
$('#form').submit(function() {
var name1 = $('input[name="name1"]', this);
// if database empty and input is empty then prevent form submissions
if (name1.attr('placeholder') == 'Enter your val here' && name1.val() == '') {
$('<div/>')
.append('please enter the val first')
.appendTo('#log');
return false;
}
});上面的逻辑是，如果满足以下条件，表单将不会提交：
- 数据库值为空，并且用户未在框
中键入任何内容
在所有其他情况下，表单将提交，因为：
- 占位符不等于'Enter your val here'，或者
- 用户在文本区域中键入要保存的内容。
Stack Overflow用户
发布于 2012-01-27 06:34:27
在文本区域上放置一个类，这样您就可以知道是否需要填充它：
<form id="form" action="page1.php" method="post">
<input type="textarea" name="name1" class="<?= empty($val1)? 'Required': 'Optional' ?>" placeholder="<?= empty($val1)? 'Enter your val here': $val1 ?>" />
<p class="submit">
<input type="submit" value="Go!" />
</p>
</form>
<div id="log"></div>并检查该字段是否为空且为必填项：
$("#form").submit(function(event) {
var $textarea = $('#form input');
if ($textarea.val().trim().length == 0 && $textarea.hasClass('Required')) {
event.preventDefault();
$('#log')
.append('please enter the val first')
.appendTo('#log')
;
return false;
} else {
return true;
}
}); (请原谅任何语法错误...这仅仅是为了提供它的大体要点。)
此外，考虑禁用submit按钮，并一直显示消息，直到表单有效并准备好提交。在我看来，这会对用户更友好。
Stack Overflow用户
发布于 2012-01-27 06:20:53
只需在不想提交的时候使用return false;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9026257
复制相关文章
相似问题
腾讯云开发者
