javascript - 提交时显示隐藏的 Div 但表单无效

Question

我正在使用 .slideToggle() 来隐藏/显示属于同一表单的 2 个 div。第一部分是用户信息，第二部分是订单部分。

一切都工作得很好，除非用户通过 SlideToggle 隐藏了顶部部分(用户信息)，但当他们单击“提交”时它无效(意味着字段缺少数据或不是正确的数据)按钮，它只是将字段突出显示为红色，并在浏览器(在本例中为 Firefox)的右下角放置一条消息，提示“此字段无效”。但用户不知道哪个字段无效，除非他们单击 div 使其再次激活 slipToggle。

我试图做到这一点，以便当用户单击提交按钮时，如果表单无效(使用 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() 失败的原因是因为我没有正确使用它？

表单很简单，它只在某些字段上具有“必需”属性，其中 1 个字段使用模式属性来确保状态只有 2 个字符。如果您需要的话，我可以发布表单的代码，但它的设计“简单”，但不是简单地编写(里面有很多 PHP)

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

如果我需要阅读有关使用 javascript 验证甚至 jquery 验证的信息，我可以，但希望只使用 HTML5。我真的很喜欢 SlideToggle() ，它可以让屏幕上一次显示更少的信息(看起来更干净)，但我不能让提交按钮不执行任何操作，并且用户会感到困惑，因为他们需要填写的字段不是' t 在屏幕上(当前)。

编辑:这是一个 fiddle

JSFiddle

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

我试图做到这一点，以便如果您的用户部分不可见且不完整，并且您单击订单部分中的按钮，用户部分将打开，以便用户可以看到他们的表单未提交的原因正确地。

Answer 1

据我了解这段代码。

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

因为您的“此”指的是按钮而不是表单。

您需要在表单元素上使用函数 checkValidity()，它是内置的 Javascript 函数