how to validate the pattern in form submit

Question

At the time of given the input in edittext field it show error if anyone will put incorrent IP Address format of IP adsress should be like these 000.000.0.000 plz help me out

IN HTML5:-

<div data-role="content">
     <form id="form">
         <div data-role="fieldcontain">
                    <label for="ip">IP Address/System Name</label>
                    <input name="ip" id="ip" type="text" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$">                       
         </div>
         <div style="text-align:center;">                   
                    <div data-role="button" data-theme="b" data-inline="true" id="button1">Update</div>
         </div> 
</div>

Answer 1

For HTML5 validation to work on submit, You have to put required attribute in your input fields, you want to validate using HTML5 and you have to submit the form.

You can handle the form data submitted through javascript, and incase you do want to handle the submitted data manually then you have to specify data-ajax="false" in you form tag

For your code, try this

<div data-role="content">
 <form id="form" data-ajax="false">
     <div data-role="fieldcontain">
                <label for="ip">IP Address/System Name</label>
                <input name="ip" id="ip" type="text" required pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$">                       
     </div>
     <div style="text-align:center;">                   
                <input type="submit" value="Submit button" />
     </div> 
 </form>
</div>

And in javascript you can do something like

$("#form").submit(function(e){
    e.preventDefault();
    //call your method

});

Answer 2

One route you can go uses mask.js - In your case you can have it force the user to input their data in the proper format, pre-populate the '.' characters in the IP, and stop the user from entering non-numeric values.

Mask.js

And here is a fiddle - http://jsfiddle.net/QF9Lz/2/

click in the textbox, you'll see a formatting mask appear and you will only be able to enter numeric values in the format you specified.

So, once you include mask.js in the head, you can initialize the input mask like this:

$(document).ready( function() {
    $('#ip').mask('999.999.9.999');
});