Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

materialize best practice validate empty field

i use this form

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input id="email2" type="email" class="validate">
                <label for="email2" data-error="wrong" data-success="right">Email</label>
            </div>
            <div class="input-field col s12">
                <input id="example" name="example" type="text" class="validate" required="" aria-required="true">
                <label for="example" data-error="wrong" data-success="right">Field</label>
            </div>
        </div>
    </form>
</div>

mail field is ok. if I post in an incorrect mail address error message appears.

example field not work. i would check if field is not empty and then show error.

What's wrong?

like image 404
ciro Avatar asked Aug 09 '15 11:08

ciro


People also ask

How do you validate input fields?

To validate the form using HTML, we will use HTML <input> required attribute. The <input> required attribute is a Boolean attribute that is used to specify the input element must be filled out before submitting the Form.

How do you validate input field while Focusout?

The focusout() method in jQuery is used to remove the focus from the selected element. Now we will use focusout() method to validate the input field while focussing out. This method checks whether the input field is empty or not.

How check field is empty or not in JavaScript?

Use the condition with “” and NULL to check if value is empty. Throw a message whenever ua ser does not fill the text box value.


1 Answers

You forgot to add required="" and aria-required="true" here is the completes snippet:

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input id="email2" type="email" class="validate" required="" aria-required="true">
                <label for="email2" data-error="wrong" data-success="right">Email</label>
            </div>
            <div class="input-field col s12">
                <input id="example" name="example" type="text" class="validate" required="" aria-required="true">
                <label for="example" data-error="wrong" data-success="right">Field</label>
            </div>
            <div class="input-field col s12">
                <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
            </div>
        </div>
    </form>
</div>

http://jsfiddle.net/u76rdq2h/

like image 53
ichadhr Avatar answered Sep 24 '22 08:09

ichadhr