Question

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

除非用户通过slideToggle隐藏了顶部（用户信息），但是当他们点击提交时它无效（意味着字段缺少数据或不是正确的数据），所以一切都运行良好按钮它只是突出显示红色字段并在浏览器的右下角放置一条消息（在本例中为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，而不是（“表单”），但它没有任何不同。

我发现的是，此代码仅在表单开头有效时触发。（警报就是我如何测试以确保代码正在激活）这意味着只有在实际提交表单时才会触发submit（）函数（这是有意义的）。

我也尝试过：

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

这对单击按钮也没有影响。

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

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

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

如果我需要阅读使用javascript验证甚至jquery验证，我可以，但希望只使用HTML5。我真的很喜欢slideToggle（）用于在屏幕上立即显示较少的信息（看起来更干净）但是我不能让提交按钮没有做任何事情并且用户感到困惑，因为他们需要填写的字段不是' t（屏幕上）（当前）。

编辑：这是一个小提琴

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

因为你的这个＆＃39;指的是不是表格的按钮。

你需要在表单元素上使用函数checkValidity（），这是一个内置的Javascript函数

在提交时显示隐藏的Div，但表单无效

1 个答案: