javascript - 验证失败时停止页面重新加载

标签 javascript jquery wordpress form-submit

我目前正在使用 javascript 验证,因此如果没有至少选中一个复选框,则不会提交该表单。它将向用户抛出一条消息,以确保至少选择一个用户。

我现在想做的是阻止表单执行其他任何操作,在我单击提交按钮后,它似乎会重新加载页面,如果不这样做会更好。

我当前的代码如下:

表格:

 <form name="frm_multi_message_form" id="multi_message_form" style="margin-bottom: 0px;"  method="post"><button style="border-style: none; margin: 5px 0 5px 0;" type="submit" action="" onClick="checkForm(this);"  >Message multiple sitters</button>
    </form>

我的 JavaScript:

  function checkForm(form)
      {

    if (document.querySelector('form[id="multi_message_form"] input[name="username[]"]:checked')) {
            document.frm_multi_message_form.action = "http://example.com/another-page/";
            document.frm_multi_message_form.submit();
        } else {
            alert("You must select at least one sitter to message");

        }
    return false;
      }

我没有遇到抛出警报的问题,并且表单提交了,我想知道如何触发preventDefault(或者在javascript查询中不允许这样做??)如果可以的话,所以什么也没发生除了显示的错误之外。

最佳答案

您应该使用onClick="return checkForm(this);",如果验证错误,您的表单将不会提交

关于javascript - 验证失败时停止页面重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41255800/

相关文章:

php - Apache 显示 It Works 而不是 WordPress 起始页

css - 如何为(帖子和页面)设置单独的布局并为主页设置不同的布局? CSS

javascript - 根据数组中的数据按一定顺序从数组中输出数据

JavaScript 与 Form Select 的关系

JavaScript - 在 JS 对象内操作 HTMLElements

jQuery在PX中获取元素宽度

javascript - 根据条件动态加载数据到easyui combobox

javascript - 如何使用 jQuery 定位表中同一行上的另一个元素

jquery - 如何切换一个div上下滑动

php - 什么时候需要在 PHP 中使用 Classes