阻止表单提交

发布于 2024-12-29 08:36:10 字数 747 浏览 0 评论 0原文

我试图使用 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');
     });   
    };

原文

I'm trying to prevent a form from submitting if a certain textarea is not filled, using jQuery. However, the textarea doesn't need to be filled if the data is already in the database. I am using the following code, but the jquery does not seem to be correct.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小苏打饼 2025-01-05 08:36:10

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

上面的逻辑是这样的，如果出现以下情况，表单将不会提交：

DB 值为空并且用户没有在框中键入任何内容

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

占位符不等于“在此处输入您的值”，或者
用户在文本区域中键入了要保存的内容。

Your selector seems a bit off if you're trying to bind to the form's onsubmit event. The result of your selector now is probably nothing because it's an invalid selector. You were probably trying to do:

$("#form input[placeholder='Enter your val here']")...

But really, all you need is:

$('#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;
    }
});

The logic above is such that the form will NOT submit if:

The DB value was empty AND the user did not type anything in the box

In all other cases, the form will submit, because:

Either the placeholder does not equal 'Enter your val here', or
the user typed something in the textarea to save.

回复收藏 0 原文

后知后觉 2025-01-05 08:36:10

在文本上放置一个类，以便您知道是否需要填写：

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

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

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

Put a class on the textare so you'll know if it needs to be filled in or not:

<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>

And check if the field is empty and required:

$("#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;
    }
});

(Please excuse any syntax errors... This is just to provide the general gist of it.)

Additionally, consider disabling the submit button and showing the message all the time until the form is valid and ready for submission. That would be more user friendly in my opinion.

回复收藏 0 原文