CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-validate
TheExit
TheExit

Reputation: 5320

jQuery Validation Plugin - Display a custom message

I'm working to use the jQuery validation plugin for a form... see full code below. While the below is checking for the project name to be required, it's not checking length, and allows the submit. See anything wrong?

<form method="post" id="new_space" data-remote="true" class="new_space" action="/spaces" accept-charset="UTF-8">
          <label for="space_name">Name</label><br>
          <input type="text" size="30" name="space[name]" id="space_name" class="text_field">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $("#new_space").validate({
        errorLabelContainer: "#ui-dialog-errors",
        wrapper: "p",
        errorClass: "error",
        invalidHandler: function() {
            $("#ui-dialog-errors").hide().fadeIn();
        },
        rules: {
            "space[name]":{required: true, minLength: 4}
        },
        messages: {
            "space[name]":{ required: "Project Name required!", minLength: "Project Name's need 4+ characters" }
        }
    });
});
</script>

Upvotes: 0

Views: 733

Answers (1)

Valentin Flachsel
Valentin Flachsel

Reputation: 10825

Changing minLength to minlength (with lowercase "l") should fix it.

For your second question, assuming form_submit is the id of your submit button, this should do the trick:

// Disable the submit button when first loaded
$("#form_submit").attr("disabled", "disabled");
$("input").change(function() {
    // Check if the form validates
    if($("#new_space").valid()) {
        // Enable the button
        $("#form_submit").removeAttr("disabled");
    }
});

See it on JSFiddle.

Upvotes: 1

Related Questions