CODEWITHSUNDEEP
jqueryformsvalidation
Aurora
Aurora

Reputation: 282

disable submit button if error on datavalidation is not working

I am using a Jquery form validator to validate some input fields in my form, what I am trying to achieve is that, if a person does not validate all the fields, the submit button should not be able to be clicked by a user.(Should be disabled)

This is where I got the validation from. http://www.formvalidator.net/index.html#advanced_toggleDisabled

Here are the codes, but I am still am able to click the submit button.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<form action="#" method="POST">
  <p>
    User name (4 characters minimum, only alphanumeric characters):
    <input data-validation="length alphanumeric" data-validation-length="min4">
  </p>
  <p>
    Year (yyyy-mm-dd):
    <input data-validation="date" data-validation-format="yyyy-mm-dd">
  </p>
  <p>
    Website:
    <input data-validation="url">
  </p>
  <p>
    <button type="submit" value="Login">BIG BUTTOn</button>
  </p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
  $.validate({
    lang: 'en'
  });

  $.validate({
  modules : 'toggleDisabled',
  disabledFormFilter : 'form.toggle-disabled',
  showErrorDialogs : false
});
</script>

</body>

</html>

Upvotes: 0

Views: 595

Answers (1)

Ish
Ish

Reputation: 2103

First of all your form don't have 'toggle-disabled' class which you are targeting.

    <form action="#" method="POST" class="toggle-disabled">

Then you need to disabled the button initially. The plugin will later enable it.

     <button type="submit" value="Login" disabled="disabled">BIG BUTTOn</button>

Working code:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>
        <form action="#" method="POST" class="toggle-disabled">
            <p>
                User name (4 characters minimum, only alphanumeric characters):
                <input data-validation="length alphanumeric" data-validation-length="min4">
            </p>
            <p>
                Year (yyyy-mm-dd):
                <input data-validation="date" data-validation-format="yyyy-mm-dd">
            </p>
            <p>
                Website:
                <input data-validation="url">
            </p>
            <p>
                <button type="submit" value="Login" disabled>BIG BUTTOn</button>
            </p>
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
        <script>
            $.validate({
                lang: 'en'
            });

            $.validate({
                modules: 'toggleDisabled',
                disabledFormFilter: 'form.toggle-disabled',
                showErrorDialogs: true
            });
        </script>

    </body>

</html>

Upvotes: 2

Related Questions