CODEWITHSUNDEEP
htmlformsvalidationmaterialize
MC123
MC123

Reputation: 845

Materialize Framework - validation of required field not working

I'm using the Materialize CSS framework and the form validation is not working.

The email validation works fine:

<div class="row">
        <div class="input-field col s12 m5 offset-m3">
            <i class="material-icons prefix">email</i>
            <input type="email" id="input_email" name="email" class="validate" />
            <label for="input_email" data-error="Please enter a valid email address">Email</label>
        </div>
    </div>

However when it comes to just a simple required field, the validation does not work...

<div class="row">
        <div class="input-field col s12 m5 offset-m3">
            <i class="material-icons prefix">account_circle</i>
            <input type="text" id="input_name" data-error="Please enter your name" name="input_name" class="validate" required="required" aria-required="true"/>
                <label for="input_name">Name</label>
        </div>
</div>

As mentioned in another post,

materialize best practice validate empty field

I have added the required and aria-required attribute (with both required="required" and required="" values [I'm not sure why this was mentioned, as far as I am aware the former is correct]). However the validation is still not doing anything apart from for the email field...

What am I doing wrong?

Thanks

PS

CDN for the Materialize HTML and Javascript are here:

<!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

JSFiddle Link: https://jsfiddle.net/rz0zk5u6/99/

Upvotes: 5

Views: 5507

Answers (1)

user753676
user753676

Reputation:

You can either overwrite the validate_field function with the following code

https://codepen.io/anon/pen/QgqLxE

$(document).ready(function() {
    window.validate_field = function(object) {
        var hasLength = object.attr('data-length') !== undefined;
        var lenAttr = parseInt(object.attr('data-length'));
        var len = object.val().length;
        if (object.val().length === 0 && object[0].validity.badInput === false && !object.is(':required')) {
            if (object.hasClass('validate')) {
                object.removeClass('valid');
                object.removeClass('invalid');
            }
        } else {
            if (object.hasClass('validate')) {
                // Check for character counter attributes
                if ((object.is(':valid') && hasLength && (len <= lenAttr)) || (object.is(':valid') && !hasLength)) {
                    object.removeClass('invalid');
                    object.addClass('valid');
                } else {
                    object.removeClass('valid');
                    object.addClass('invalid');
                }
            }
        }
    };
});

Or wait until the following PR is merged. https://github.com/Dogfalo/materialize/pull/4883

Upvotes: 1

Related Questions