CODEWITHSUNDEEP
htmljquery-mobile
user481610
user481610

Reputation: 3270

jQuery Mobile form Validation and html 5

I'm new to the whole jQuery Mobile and HTML5 space (so bear with me) and I am validating forms for the first time. Now I would really like to validate the forms using html 5 where the following pops up:

enter image description here

Now I've decided to give this a bash and have the following code:

<form>
     <input required type="text" name="searchtitle" id="searchtitle" placeholder="Enter the textbook's title">
     <input type="submit" id ="searchsubmit" name="searchsubmit" value="Search">
 </form>

Now I have the following code for when the 'Search' button above is clicked:

$(document).on('pageinit',"#searchpage",
function()
{
   $("#searchsubmit").click(
   function(e)
   {
   //Do a lot of processing here
   window.location.href ="#results";
   }  
 });

Now I'm note sure why when I click the Search button click event is run and not stopped because of the form validation and if I am completely wrong can someone point me in the right direction that will teach me how to do the form validation using the HTML5

Upvotes: 1

Views: 4581

Answers (2)

asgeo1
asgeo1

Reputation: 9078

Those HTML5 "popups" you mentioned are implemented by the browsers themselves.

I don't think there is great support for them. Particularly on mobile browsers, which is where you would typically run a jQuery Mobile app.

I would use something like jQuery Validate to handle the form validation for now if I were you.

http://jqueryvalidation.org

Upvotes: 3

JanR
JanR

Reputation: 6130

The reason it is not stopped is because an input type="submit" will submit by default, so it's reloading the page. You need to add the following line to your code:

$(document).on('pageinit',"#searchpage",
function()
{
   $("#searchsubmit").click(
   function(e)
   {
   e.preventDefault(); // add this line to prevent the form from submitting regardless.
   //Do a lot of processing here
   window.location.href ="#results";
   }  
 });

Upvotes: 0

Related Questions