JQuery mobile: how to validate the form and show error message on page

javascript jquery ajax html jquery-mobile

31,342

Simply combine jQuery validation plugin with jQuery Mobile.

Working example: http://jsfiddle.net/Gajotres/RLJHK/

HTML:

<div data-role="page" id="home" data-theme="b">
    <form id="form1">
        <div data-role="header">
            <h2>Get Update</h2>

        </div>
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label for="fname" data-theme="d">First Name:</label>
                <input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name"/>
                <br />
            </div>
            <div data-role="fieldcontainer">
                <label for="lname" data-theme="d">Last Name:</label>
                <input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name"/>
            </div>
            <div data-role="fieldcontainer">
                <label for="email" data-theme="d">E-mail Address:</label>
                <input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email"/>
            </div>            
        </div>
        <div data-role="footer" data-position="fixed">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <div class="ui-bar ui-bar-a">
                        <input type="button" data-icon="delete" value="Cancel" id="cancel"/>   
                    </div>
                </div>
                <div class="ui-block-b">
                    <div class="ui-bar ui-bar-a">
                        <input type="submit" data-icon="check" value="Submit" id="submit"/>
                    </div>
                </div>
            </div>
        </div>
    </form>                  
</div>
<div data-role="page" id="success" data-theme="b">
    <div data-role="header">
        <h2>Thank You !!!</h2>
    </div>
</div>

JavaScript:

$('#form1').validate({
    rules: {
        fname: {
            required: true
        },
        lname: {
            required: true
        },
        email: {
            required: true
        }
    },
    messages: {
        fname: {
            required: "Please enter your first name."
        },
        lname: {
            required: "Please enter your last name."
        },
        lname: {
            required: "Please enter your email."
        }
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().prev());
    },
    submitHandler: function (form) {
        $(':mobile-pagecontainer').pagecontainer('change', '#success', {
            reload: false
        });
        return false;
    }
});

CSS:

.error {
    color:red;
}

If you want to find more about this topic take a look here.

31,342

Author by

ashok_p

Updated on June 04, 2020

Comments

ashok_p almost 4 years

Hi i am new to JQM and i am trying to work on a JQM login page.

can any one help me how to do form validation and show the errors below the username and password text box if they are left empty and also when there is a invalid login i have to show it as an error message on top of the form.

here is my html:

    <!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.2.min.css" /> 
    <script src="jquery.mobile/jquery.js"></script>
    <script src="js/login1.4.2.js"></script>
    <script src="jquery.mobile/jquery.mobile-1.4.2.min.js"></script> 

</head>
<body>
    <input type="hidden" id="session_key" />
    <div data-role="page" id="login" class="" data-ajax="false">
        <div data-role="header"   >
            <h3>Login Page</h3>
        </div>

        <div data-role="main" class="ui-content" >
            <form id="check-user"  data-ajax="false" class="ui-bar ui-bar-a ui-corner-all"  >
                <fieldset  >
                    <div class="ui-field-contain" >
                        <label for="username" class="required">Enter your username:</label>
                        <input  type="text" value="" name="username" id="username"/>
                        <label for="password">Enter your password:</label>
                        <input type="password" value="" name="password" id="password" />
                    </div>
                    <button class="ui-btn ui-shadow ui-corner-all ui-btn-b" name="submit" id="submit" value="submit">Submit</button>
                </fieldset>
            </form>

        </div>
    </div>


    <div data-role="page" id="panel-main" >
        <div data-role="header">
            <h1>main panel</h1>
        </div>
        <div role="main" class="ui-content ">
            <p>main panel</p>
        </div>
    </div>

</body>
</html>

Here is my JS file

$(document).on('pageinit', '#login',  function() {
    $("#submit").on("click",function(){


       $.ajax({
          url: "login_back.php",
          type: "GET",
          data: $("form#check-user").serialize(),
          async: true,
          callback: 'jsonLogin',
          dataType:'jsonp',
          success: function (result) {
            if(result.status==true)
            {
                $('#session_key').val(result.session_key);
                $( ":mobile-pagecontainer" ).pagecontainer( "change", "#panel-main" );
            }
            else
            {
                alert("Wrong Username/Email and password combination");// here insted of alert i want to display it as error message in the form
            }
          },
          error: function (request,error) {
            alert('Network error has occurred please try again!'+error);
          }, 

        });
        return false;
    });

});