Jquery validation skipping invalid input

Question

I'm moving my HTML/JS over to Django and using it's validation forms. However, I still want to use Jquery's for certain things like making sure an answer is inputted before the div is hidden. Jquery validate used to work but I broke it transitioning to Django, possibly from using the input tags to create my inputs? I use an onclick to validate instead of submit by the way.

Anyway, here is the 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};}

And the rendered HTML, after Django does its thing:

<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>

Every time time I click that button, the console prints "valid" and moves on. I don't understand how the form passes as valid without anything in the input field.

Also maybe of note, when inspecting the element, the field required at the end of the input appears without an = or "", this came over on coping the element to paste here.

Your code is working .Only change i have done is adding a div with id `cc_error` which i didn't find in your provided code . — Swati, Aug 14 '20 at 04:03

score 0 · Answer 1 · answered Aug 14 '20 at 06:11

here you can observed my code

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

i wonder why either janggo or you using <input> for button instead <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()'>

extra

<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="">

you don't need required="" on the html section because you already defined it on the jquery validator. and also you can move maxlength from the html to jquery validator rules.

score 0 · Answer 2 · answered Aug 14 '20 at 17:55

Follow up:

The problem was I was using a form within a form. This had worked for some reason in my original code by an act of god. This is the docs explaing form within form problems: http://www.w3.org/MarkUp/html3/forms.html

To solve this issue: Embed an HTML <form> within a larger <form>?

Jquery validation skipping invalid input

2 Answers2