提交时显示隐藏的潜水，但表单不是't有效

Show a Hidden Div on submit but form isn't valid

本文关键字：有效 表单 显示 隐藏 潜水 提交      更新时间：2023-09-26

我使用.slideToggle（）来隐藏/显示同一表单中的两个div。第一部分是用户信息，第二部分是订单部分。

一切都很好，除非用户在幻灯片切换中隐藏了顶部（用户信息），但它是无效的（意味着字段缺少数据或不是正确的数据）。当他们单击"提交"按钮时，它只是将字段高亮显示为红色，并在浏览器（在本例中为firefox）的右下角显示一条消息，说"此字段无效"。但是用户不知道哪个字段无效，除非他们单击div使其再次激活slideToggle。

我试图让它在用户点击提交按钮时，如果表单无效（使用HTML5"必需"字段或模式），它将显示隐藏的（通过slideToggle）div，这样用户就知道他们的表单为什么没有通过。

这是我迄今为止尝试过的代码：

$("form").submit(function(){
    var testvalue = "Hi!";
    alert(testvalue);
    if (!$(this).valid()) {
        $("#user_info_div_2").show();
        $("#user_info_div_3").show();
    }
});

我也试过：

("#po_form")

这是我表单的ID，而不是（"form"），但没有什么不同。

我发现，只有当表单开头有效时，此代码才会触发。（警报只是我测试以确保代码正在启动的方式）这意味着submit（）函数只有在表单实际提交时才会启动（这是有道理的）。

我也试过：

$("#po_submit_button").click(function(){
    if (!$(this).valid()) {
        var testvalue = "Not Valid Form";
        alert(testvalue);
    }
});

这也没有影响点击按钮。

我没有使用javascript验证，所以.valid（）失败的原因可能是因为我没有正确使用它？

表单很简单，它只是在一些字段上有"required"属性，其中1个字段使用模式属性来确保状态只有2个字符。如果你需要的话，我可以发布表单的代码，但它的设计"简单"，但不是简单编写的（里面有很多PHP）

如果表单无效，有没有办法让它运行一些.show（）代码？

如果我需要阅读关于使用javascript验证甚至jquery验证的内容，我可以，但我希望只使用HTML5。我真的很喜欢slideToggle（），它可以让屏幕上同时显示更少的信息（看起来更干净），但我不能让提交按钮不做任何事情，用户会感到困惑，因为他们需要填写的字段（目前）也不在屏幕上。

编辑：这是一把小提琴

JSFiddle

这就是我当前代码的工作方式。（或不工作）

我正在努力做到这一点，如果你的用户部分不可见，也不完整，然后你点击订单部分中的按钮，用户部分就会打开，这样用户就可以看到他们的表单没有正确提交的原因。

根据我对这段代码的理解。

$("#po_submit_button").click(function(){
    if (!$(this).valid()) {
        var testvalue = "Not Valid Form";
        alert(testvalue);
    }
});

需要更改为

$("#po_submit_button").click(function(){
    if (!$("#po_form")[0].checkValidity()) {
        var testvalue = "Not Valid Form";
        $("#user_info_div_2").show();
    $("#user_info_div_3").show();
    }
});

由于您的"this"指的是按钮而不是表单。

您需要在表单元素上使用函数checkValidaty（），该元素是Javascript函数

中内置的
相关文章：