When I submit my form in the jquery mobile framework, it will go back to the first page (#page), in this case my menu! I'm using the jquery form validation plugin.
Once all my form validation is done I need it to to show an alert box. At the moment, when all the data is correct and I click submit it will revert back to the homepage and do nothing. But if I refresh the homepage, it will then display the alert box ("all good")...weird, I know!
I've looked everywhere and I can't find anything that fixes my problems, I tried adding a method='post' but all that did was display error loading page and do nothing
<form id='valForm'>
<!-- Name, Age -->
<div data-role="fieldcontain">
<label for="txtNamev">Name:</label>
<input type="text" name="txtNamev" id="txtNamev" value="" />
</div>
<div data-role="fieldcontain">
<label for="numAgev">Age:</label>
<input type="number" name="numAgev" id="numAgev" value="" />
</div>
<!-- Sex, Default value = Male-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Sex</legend>
<input type="radio" name="sexv" id="sex_malev" value="Male" />
<label for="sex_malev">Male</label>
<input type="radio" name="sexv" id="sex_femalev" value="Female" checked='checked' />
<label for="sex_femalev">Female</label>
</fieldset>
</div>
<!-- Emails -->
<div data-role="fieldcontain">
<label for="txtEmailv">e-mail:</label>
<input type="email" name="txtEmailv" id="txtEmailv" value="" />
</div>
<div data-role="fieldcontain">
<label for="txtEmailv1">Confirm e-mail:</label>
<input type="email" name="txtEmailv1" id="txtEmailv1" value="" />
</div>
<!-- Interest In checkboxes -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>I am interested in the following</legend>
<input type="checkbox" name="interestv[]" value='Comet' id="interest_0v" class="custom" value="" />
<label for="interest_0v">Comet</label>
<input type="checkbox" name="interestv[]" value='Common Goldfish' id="interest_1v" class="custom" value="" />
<label for="interest_1v">Common Goldfish</label>
<input type="checkbox" name="interestv[]" id="interest_2v" class="custom" value="Black Moor" />
<label for="interest_2v">Black Moor</label>
<input type="checkbox" name="interestv[]" value='Celestial Eye' id="interest_3v" class="custom" value="" />
<label for="interest_3v">Celestial Eye</label>
<input type="checkbox" name="interestv[]" value='Fantail' id="interest_4v" class="custom" value="" />
<label for="interest_4v">Fantail</label>
<input type="checkbox" name="interestv[]" value='Lionchu' id="interest_5v" class="custom" value="" />
<label for="interest_5v">Lionchu</label>
<input type="checkbox" name="interestv[]" value='Other' id="interest_6v" class="custom" value="" />
<label for="interest_6v">Other</label>
</fieldset>
</div>
<div data-role="fieldcontain" class='display'>
<label for="txtVariety">Fish Varieties:</label>
<textarea cols="40" rows="8" name="txtVariety" id="txtVariety"></textarea>
</div>
<p id='checkboxError'></p>
<!-- Text Area - Fish Varieties -->
<!-- Drop down select menu - How did u hear about us -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">How did you hear about us?:</label>
<select name="selectmenu" id="selectmenu" multiple='multiple' data-native-menu='false'>
<option disabled='disabled' value='Pick one or more options' id='selectChecked'>Pick one or more options</option>
<option value="Internet">Internet</option>
<option value="Email">Email</option>
<option value="Friend">Friend</option>
<option value="Billboard">Billboard</option>
<option value="Other">Other</option>
</select>
</div>
<!-- Register & Start again buttons -->
<input type="submit" id='submitv' value="Register"/>
<input type="submit" id='resetFormv' value="Start Again" />
</form>
<!-- Print out the details -->
<div id='printDetails'></div>
</div>
<div data-role="footer">
<h4>James Wainwright</h4>
</div>
</div>
##jQuery
$(document).ready(function() {
var ok = false;
$("#errorBox").hide();
var validForm = $("#valForm").validate({
errorContainer:"#errorBox",
errorLabelContainer:"#errorBox ul",
wrapper:"li",
rules:{
txtNamev:{
required:true,
minlength:5,
//noAnon:true
},
numAgev:{
required:true,
},
txtEmailv:{
required:true,
email:true
},
txtEmailv1:{
required:true,
email:true,
equalTo:"#txtEmailv"
},
'interestv[]':{
required:true,
minlength: 1
}
},
messages:{
txtNamev:{
required:"Your name must be more than 5 characters",
minlength:jQuery.format("You need at least {0} characters for your name")
},
numAgev:{
required:"Please enter an age"
},
txtEmailv:{
required:"You must enter an E-mail Address"
},
txtEmailv1:{
required:"Please confirm your email",
equalTo: "The email must match the above"
},
'interestv[]':{
required:"Check atleast one checkbox"
}
}
});
if(validForm.form())
{
alert("All is good");
}
/*Please take note that my checkbox validation is working, if you click on one and click submit the message will go away
But please click submit without checking all the other buttons, as the form will just loop to the homepage
*/
});
You don't prevent the form from submitting. You have error checking in, but nowhere do you tell the browser to not actually submit the form. Therefore it submits, and since you don't have an action, it will return to the initial page for your site. You need to prevent the default behavior in your form handler by either using e.preventDefault(); (ensure you define e as your event argument) or return false.
Ok, so generically, you can listen for a form post like so (assume you do id="mainForm" to your form tag):
$("#mainForm").on("submit", function(e) {
e.preventDefault(); //dont let the form submit
//this is where you do stuff like, check the form, and then possibly POST it via XHR
//when done, you have to do something, like alert('dude im done!') or use
// jQM's changePage API to go to a 'done' type page
}