Jquery验证跳过无效输入

Posted 2023-05-09

【中文标题】Jquery验证跳过无效输入

【英文标题】：Jquery validation skipping invalid input

【发布时间】：2020-12-03 20:19:42

【问题描述】：

我正在将我的 html/JS 转移到 Django 并使用它的验证表单。但是，我仍然想将 Jquery 用于某些事情，例如确保在隐藏 div 之前输入答案。 Jquery validate 曾经工作，但我打破了它过渡到 Django，可能是使用输入标签来创建我的输入？我使用onclick来验证而不是顺便提交。

不管怎样，这里是 JS：

$(document).ready(function() 
  var validater = $("#cc_form").validate(
    rules: 
      pt_cc : 
        required: true,
        minlength: 3,
      ,
    ,
    messages: 
        pt_cc: "Please enter an answer",
      ,
    errorPlacement: function(error, element) 
             if (element.attr("name") == "pt_cc") 
              error.appendTo("#cc_error")
                 else 
                error.insertAfter(element);,
    onfocusout: false,
    invalidHandler: function(form, validater) 
        var errors = validater.numberOfInvalids();
        if (errors) 
            validater.errorList[0].element.focus();
    ););

function sendto() 
  if ($("#cc_form").valid()) 
    console.log('valid');
  else return false;

在 Django 完成它之后，渲染的 HTML：

<form id='cc_form' name="contentForm" role="form" data-toggle="validator">
        <div style='display:none; background-color:white' class="jumbotron shadow-lg text-center mb-4 mx-5" id=somethingelse_page>
          <h3>In 5 words or so, try to describe your problem.</h3><hr>

          <div class="d-flex align-items-center mx-auto input-group mb-2">
                <div class="input-group mb-2 col-md-6 mx-auto">

                 <input type="text" name="pt_cc" placeholder="For example: &quot;I can't sleeep at all&quot;" class="form-control" id="something_else_cc_answer" maxlength="75" required="">
                 
                </div>
              </div>
        <div id='sub_1' class='row'>
          <input id='sub_but_1' type="button" class="btn btn-primary d-flex align-items-center px-4 mx-auto my-3" value='Next' onclick='sendto()'>
        </div>
            </form>
        </div> 

每次单击该按钮时，控制台都会打印“有效”并继续前进。我不明白表单如何在输入字段中没有任何内容的情况下通过。

也许还需要注意的是，在检查元素时，输入末尾所需的字段显示时没有 = 或“”，这是在处理要粘贴到此处的元素时出现的。

【问题讨论】：

您的代码正在运行。我所做的唯一更改是添加一个 ID 为 cc_error 的 div，我在您提供的代码中没有找到它。

【参考方案1】：

在这里你可以观察我的代码

$("#employeeContactForm").validate(
        rules: 
            cellular_number: "required",
            address_1: "required"
        ,
        messages: 
            cellular_number: "No Handphone wajib dipilih (*)",
            address_1: "Alamat sesuai KTP wajib diisi",
        ,

        errorElement: "em",
        errorPlacement: function(error, element) 
            return errorPlacement(error, element)
        ,
        highlight: function(element, errorClass, validClass) 
            return highlight(element, errorClass, validClass);
        ,
        unhighlight: function(element, errorClass, validClass) 
            return unhighlight(element, errorClass, validClass);
        ,
        submitHandler: function(form) 
            $(form).ajaxSubmit(
                success: function() 
                    $("#employeeContactForm").addClass('submited');
                
            );
        ,
    );
var isValid = $("#employeeContactForm").valid();
if(isValid)console.log("valid")

我想知道为什么 janggo 或你使用 <input> 代替按钮 <button>

<input id='sub_but_1' type="button" class="btn btn-primary d-flex align-items-center px-4 mx-auto my-3" value='Next' onclick='sendto()'>

额外的

<input type="text" name="pt_cc" placeholder="For example: &quot;I can't sleeep at all&quot;" class="form-control" id="something_else_cc_answer" maxlength="75" required="">

您不需要 required="" 在 html 部分，因为您已经在 jquery 验证器上定义了它。您还可以将 ma​​xlength 从 html 移动到 jquery 验证器规则。

【参考方案2】：

跟进：

问题是我在表单中使用了表单。由于某种原因，这在我的原始代码中因上帝的行为而起作用。这是表单问题中的文档解释表单：http://www.w3.org/MarkUp/html3/forms.html

要解决这个问题： Embed an HTML <form> within a larger <form>?