CODEWITHSUNDEEP
javascriptjqueryhtmlformsmobile
nshah
nshah

Reputation: 597

Jquery Mobile Form Validation not working properly

The form should validate and if its not valid, the form should not proceed, but it is automatically transferring the app to another page...

HTML

<div data-role="page" id="newevent1">
<div data-role="header">
    <h1>New Event</h1>
</div>
<div data-role="content">
    <form id="newevent1info" name="newevent1info" align="left">
        <div data-role="fieldcontain">
            <label for="ename">Event Name:</label>
            <input align="right" type="text" id="ename" name="ename" />
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Date:</legend>
                <input type="date" id="date" name="date"/>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Time:</legend>
                <input type="time" id="time" name="time" />
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <label for="descevent">Description: </label>
            <input type="text" id="descevent" name="descevent"/>
        </div>
        <button type="submit" name="submit">Create Event</button>
    </form>
</div>
</div>

JAVASCRIPT

    $('#newevent1info').submit(function (event) {
event.preventDefault();

if ($(this).validate({
rules: {
ename: {
required: true
},
descevent: {
required: true
},
date: {
required: true
},
time: {
required: true
},
}
}).form()) {

alert("success");

}
});

i want it to only alert success if all the form data is valid. what do i need to fix?

Upvotes: 0

Views: 1648

Answers (1)

Ricky H
Ricky H

Reputation: 117

Simply return false if not true.

$('#newevent1info').submit(function (event) {
    event.preventDefault();
    if ($(this).validate({
        rules: {
            ename: {
                required: true
            },
            descevent: {
                required: true
            },
            date: {
                required: true
            },
            time: {
                required: true
            },
        }
    }).form()){
            alert("success");
        } else {
            return false;
        }
});

Upvotes: 1

Related Questions