jQuery Mobile 未能阻止提交空输入字段值
jQuery Mobile fails to prevent the submit of an empty input field value
在我使用 jQuery Mobile v1.4.5 和 jQuery 1.12.0 构建的网站上,我有一个 表单输入字段 用户可以在其中提交消息使用 Return 键(没有明确的提交按钮)。我想防止用户提交空输入,我基本上在 Stackoveflow 上找到 solutions for that 并重用了代码,但不知何故 它仍然失败,这意味着我的函数仍然传递空输入值。
这里的任何人都可以发现我的代码中关于为什么提交空输入字段仍然通过验证的问题吗?
<form id="formNewMessage" data-ajax="true" method="post" action="ajax_post_message.php">
<input type="hidden" name="fromMobile" id="fromMobile" value="1">
<input type="text" name="messageInput" id="messageInput" data-clear-btn="true" placeholder="Type your message here..." autocomplete="off">
</form>
<script>
$('#messageInput').keypress(function(e){
if ((e.which == 13) && ($.trim($('#messageInput').val()) != "")) { // send message on Return, but prevent empty submits <-- this is not working :(
$(this).attr('disabled', 'disabled'); // lock the input field
$('#formNewMessage').submit(function(ev){
$.ajax({
type: $('#formNewMessage').attr('method'),
url: $('#formNewMessage').attr('action'),
data: $('#formNewMessage').serialize(),
success: function (data) {
$('#messageInput').val(''); // clear the input field
window.location.reload(true); // reload the page
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus + ' ' + errorThrown);
}
});
ev.preventDefault(); // avoid to execute the actual submit of the form.
});
$(this).removeAttr('disabled'); // unlock the input field
}
});
</script>
感谢您提供解决此问题的任何提示和建议!
很可能它选择 Enter 作为键因此它认为输入不为空
替换此
$('#messageInput').val()) != ""
和
$('#messageInput').val()).length > 1
获取长度(输入中的字符数)并检查它是否大于 1。
在我使用 jQuery Mobile v1.4.5 和 jQuery 1.12.0 构建的网站上,我有一个 表单输入字段 用户可以在其中提交消息使用 Return 键(没有明确的提交按钮)。我想防止用户提交空输入,我基本上在 Stackoveflow 上找到 solutions for that 并重用了代码,但不知何故 它仍然失败,这意味着我的函数仍然传递空输入值。
这里的任何人都可以发现我的代码中关于为什么提交空输入字段仍然通过验证的问题吗?
<form id="formNewMessage" data-ajax="true" method="post" action="ajax_post_message.php">
<input type="hidden" name="fromMobile" id="fromMobile" value="1">
<input type="text" name="messageInput" id="messageInput" data-clear-btn="true" placeholder="Type your message here..." autocomplete="off">
</form>
<script>
$('#messageInput').keypress(function(e){
if ((e.which == 13) && ($.trim($('#messageInput').val()) != "")) { // send message on Return, but prevent empty submits <-- this is not working :(
$(this).attr('disabled', 'disabled'); // lock the input field
$('#formNewMessage').submit(function(ev){
$.ajax({
type: $('#formNewMessage').attr('method'),
url: $('#formNewMessage').attr('action'),
data: $('#formNewMessage').serialize(),
success: function (data) {
$('#messageInput').val(''); // clear the input field
window.location.reload(true); // reload the page
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus + ' ' + errorThrown);
}
});
ev.preventDefault(); // avoid to execute the actual submit of the form.
});
$(this).removeAttr('disabled'); // unlock the input field
}
});
</script>
感谢您提供解决此问题的任何提示和建议!
很可能它选择 Enter 作为键因此它认为输入不为空
替换此
$('#messageInput').val()) != ""
和
$('#messageInput').val()).length > 1
获取长度(输入中的字符数)并检查它是否大于 1。