Nodejs环境下jquery validate中的问题

Nodejs环境下jquery validate中的问题

使用jquery validate的时候，遇到问题如下： 1、使用ajax递交 2、发起递交的button必须是submit类型 3、在执行ajax递交后马上会做一次submit默认递交（取决于fom上的method） 希望不要自动执行form上的method，如何办？

下面是示例代码

extends layout

block content script. function save(){ var rules = { name: “required”, password: “required” }; alert(“1”); $("#aForm").validate( { rules : rules, submitHandler: function(form){ alert(“2”); //$.ajax( var options = { url: “/input”, type: ‘POST’, async: true, //异步 data: {name:“aaa”,password:“bbb”}, dataType: “json”, cache: false, //不加载缓存 success: function (obj) { if (obj.status == “success”){ alert(“保存成功！”); location.href = “./input”; }else{ alert(“保存失败！”);} }, error: function () { alert(“请求失败，稍后再试！”); }, debug:true }; //); alert(3); form.ajaxSubmit( options ); } } ); } $(document).ready(function(){ $(“input#save”).click(save); });

div.wrapper form#aForm p label name input#name(name=‘name’,type=‘text’) p label password input#password(name=‘password’,type=‘password’) p input#save(type=‘button’,value=“aave”)


2 回复

Node.js 环境下 jQuery Validate 中的问题

在 Node.js 环境下使用 jQuery Validate 进行表单验证时，可能会遇到一些常见的问题。你提到的问题包括：

  1. 使用 AJAX 提交表单。
  2. 发起提交的按钮必须是 submit 类型。
  3. 在执行 AJAX 提交后，表单会立即尝试按默认方式提交。

为了避免这种情况，你可以通过阻止表单的默认提交行为来解决这个问题。下面是一个详细的解决方案示例：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Validate Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <form id="aForm" method="post">
            <p>
                <label for="name">Name:</label>
                <input id="name" name="name" type="text" required>
            </p>
            <p>
                <label for="password">Password:</label>
                <input id="password" name="password" type="password" required>
            </p>
            <p>
                <input id="save" type="button" value="Save">
            </p>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $("#aForm").validate({
                rules: {
                    name: "required",
                    password: "required"
                },
                submitHandler: function(form) {
                    alert("2");
                    $.ajax({
                        url: "/input",
                        type: 'POST',
                        async: true, // 异步
                        data: $("#aForm").serialize(),
                        dataType: "json",
                        cache: false, // 不加载缓存
                        success: function(obj) {
                            if (obj.status == "success") {
                                alert("保存成功！");
                                location.href = "./input";
                            } else {
                                alert("保存失败！");
                            }
                        },
                        error: function() {
                            alert("请求失败，稍后再试！");
                        },
                        debug: true
                    });
                    return false; // 阻止默认提交
                }
            });

            $("#save").click(function(e) {
                e.preventDefault(); // 阻止按钮的默认行为
                if ($("#aForm").valid()) {
                    $("#aForm").submit();
                }
            });
        });
    </script>
</body>
</html>

解释

  1. HTML 表单结构:

    • 表单元素使用了 required 属性，确保输入字段不能为空。
    • 按钮类型设置为 button 而不是 submit。

  2. JavaScript 代码:

    • 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本。
    • $("#aForm").validate() 初始化表单验证，并定义验证规则。
    • submitHandler 函数用于处理表单验证成功后的 AJAX 提交操作。
      • $.ajax() 发送 POST 请求到 /input。
      • return false; 阻止表单的默认提交行为。
    • $("#save").click() 绑定点击事件处理函数。
      • e.preventDefault() 阻止按钮的默认提交行为。
      • $("#aForm").valid() 检查表单是否有效，如果有效则手动提交表单。

通过这些步骤，你可以避免表单在 AJAX 提交后立即按默认方式提交的问题。


在Node.js环境中使用jQuery Validate时，您可能遇到了一些问题，特别是在处理表单提交时。根据您的描述，问题主要集中在AJAX提交时，表单会自动触发默认的提交行为。

解决方案

您可以通过取消按钮的默认提交行为，并确保只通过AJAX进行提交来解决这个问题。以下是修改后的代码：

修改HTML部分

将按钮类型从submit改为button，以避免默认的表单提交行为：

input#save(type='button', value="Save")

修改JavaScript部分

确保点击事件不会触发默认提交，并且仅通过AJAX进行提交：

<script>
$(document).ready(function() {
    $("#save").click(function(e) {
        e.preventDefault(); // 阻止按钮的默认行为
        
        var rules = {
            name: "required",
            password: "required"
        };

        $("#aForm").validate({
            rules: rules,
            submitHandler: function(form) {
                $.ajax({
                    url: "/input",
                    type: 'POST',
                    async: true,
                    data: {name: "aaa", password: "bbb"},
                    dataType: "json",
                    cache: false,
                    success: function(obj) {
                        if (obj.status === "success") {
                            alert("保存成功！");
                            location.href = "./input";
                        } else {
                            alert("保存失败！");
                        }
                    },
                    error: function() {
                        alert("请求失败，稍后再试！");
                    },
                    debug: true
                });
            }
        });
    });
});
</script>

解释

  • e.preventDefault()：阻止按钮的默认提交行为。
  • submitHandler：当表单验证通过时，执行自定义的AJAX提交逻辑。
  • $.ajax：使用jQuery的AJAX方法来进行异步数据提交。

通过这些调整，您可以确保表单验证通过后仅通过AJAX提交数据，而不会触发默认的表单提交行为。

回到顶部