jquery validator still closes when not valid

Question

I do not know what I am doing wrong. I made a modal with a form in it I check if the form is valid by doing .valid(); even tough when you do something wrong and field turns red so jquery validator detected you did something wrong it still returns true I have been searching why this is happening for 1 day now. I figured maybe one of you guys or girls know.

here is a working snipplet https://jsfiddle.net/jgytud7h/6/

Thanks in advance!

EDIT : If you fill in the first field and select a type. it will close even tough the form is not valid in my eyes.

HTML:

Jquery:

.validator.addMethod("subdomain", function(value, element) {
  return this.optional(element) || /^[A-Za-z0-9](?:[A-Za-z0-9\-]{0,61}[A-Za-z0-9])?$/i.test(value);
    },"Error! Invalid subdomain.");

$.validator.addMethod("domain", function(value, element) {
  return this.optional(element) || /^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$/i.test(value);
    },"Error! Invalid domain.");

$.validator.addMethod("prio", function(value, element) {
  return this.optional(element) || /^(10|1)$/i.test(value);
    },"Error! Invalid Prio.");

$.validator.addMethod("onlynumbers", function(value, element) {
  return this.optional(element) || /^[0-9]+$/i.test(value);
    },"Error! Field Must contain only numbers");




 $('form[name*="validate"]').validate({
        errorElement:'div',
        errorClass: 'alert alert-danger',
        validClass: 'alert-success',
        onkeyup: false,
        onclick: false,
        errorPlacement: function(error, element) {
            error.addClass('messagediv2');
            error.addClass('page-controls');
            error.insertAfter("h4.modal-title");

        }
    });
    $('form[name*="validate"]').on('change', function(){
        $(this).validate();
        if ($(this).valid) {
            $(".messagediv2").remove();
        }
    });




 $('#adddnssave').on('click', function () {
        $('#adddnssave').prop('disabled', true);

                if ($('#typeadd').val() != 'notselected'  && $('#typeadd').val() != null) {
                    if ($('form[name*="validate"]').valid()) {
                        $.ajax({
                            url: "",
                            type: "post",
                            data: {
                                domain: $('#domainadd').val(),
                                ext: $('#extadd').val(),
                                name: $('#nameadd').val(),
                                type: $('#typeadd').val(),
                                content: $('#contentadd').val(),
                                prio: $('#prioadd').val(),
                                ttl: $('#ttladd').val()
                            },
                            dataType: "json",
                            success: function (response) {
                                var message =
                                    '' +
                                    '' + response + '  DNS is successfully added' +
                                    '' +
                                    '';
                                $('#adddnsmodal').modal('hide');
                                $("#navbarmenue").after(message);
                                setTimeout(function () {
                                    $('#adddnssave').prop('disabled', false);
                                }, 2000);

                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                setTimeout(function () {
                                    $('#adddnssave').prop('disabled', false);
                                }, 1500);
                                console.log(textStatus, errorThrown, 'error');

                            }
                        });
                    } else {
                        $('#adddnssave').prop('disabled', false);
                             var message =
                                    '' +
                                    '' + response + '  Modal is not valid' +
                                    '' +
                                    '';
                                $("#navbarmenue").after(message); 
                    }


                } else {
                    var message =
                        '' +
                        'Error  Select a type' +
                        '' +
                        '';
                    $("h4.modal-title").before(message);
                    setTimeout(function () {
                        $('#adddnssave').prop('disabled', false);
                    }, 1500);
                }
            });

SSA · Accepted Answer

In your jsfiddle example you are checking for a valid form but valid is not a property but a function.

change this:

if ($('form[name*="validate"]').valid) {

to

if ($('form[name*="validate"]').valid()) {

example here

Update: Another problem was that mandatory name attribute for jquery validation was missing. Adding name attribute fixed the issue.

jquery validator still closes when not valid

Answers (1)

Related Questions