Jquery验证跳过无效输入答案

【问题标题】：Jquery validation skipping invalid inputJquery验证跳过无效输入
【发布时间】：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，我在您提供的代码中没有找到它。

标签： javascript jquery django validation

【解决方案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 验证器上定义了它。您还可以将 maxlength 从 html 移动到 jquery 验证器规则。

【讨论】：

【解决方案2】：

跟进：

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

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

【讨论】：