Question

我正在尝试阻止表单提交，如果某个textarea没有填充，使用jQuery。但是，如果数据已存在于数据库中，则不需要填充textarea。我使用以下代码，但jquery似乎不正确。

HTML＆amp; 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');
     });   
    };

Answer 1

如果您尝试绑定到表单的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;
    }
});

上面的逻辑表明，如果符合以下情况，表单将不会提交：

数据库值为空，用户未在框中输入任何内容

在所有其他情况下，表单将提交，因为：

占位符不等于“在此处输入您的val”或
用户在textarea中输入要保存的内容。

Answer 2

在textare上放一个课程，这样你就可以知道它是否需要填写：

<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;
    }
});

（请原谅任何语法错误......这只是为了提供它的一般要点。）

此外，请考虑禁用提交按钮并始终显示消息，直到表单有效并准备提交。在我看来，这会更加用户友好。

Answer 3

只要您不想提交

，只需return false;

防止表单提交

3 个答案: