Response title
This is preview!
- Screen name: redchick
redchick's Profile
2 Posts
2 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- I am using the single page template to build my mobile app. I have a form page thati have gotten form validation and ajax "working", however the form has an odd problem.After passing validation, it will only return an ajax response from the server afterhitting the submit button TWICE. Thus, nothing happens the FIRST time thesubmit button is pressed.It has taken me quite a number of days to get to this stage, I would appreciate somehelp. Thanks. Here is my code...======================================================<body><!-- call ajax page -->
<div data-role="page" id="genericPage"><script>
function onSuccess(data, status) {data = $.trim(data);
// display server response$("#notification").popup().text(data);
$("#notification").popup("open");
}function onError(data, status) {
data = $.trim(data);
//display server error message$("#notification").popup().text(data);
$("#notification").popup("open");
}
</script><script>
$(document).ready(function() {$("#genericForm").validate({
submitHandler: function(form) {
$("form").submit(function() {
var formData = $("#genericForm").serialize();
$.ajax({
type: "POST",
url: "ajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
});
}
});});
</script>
<div data-role="content"><form id="genericForm"><div id="notification" data-role="popup" data-theme="e" data-overlay-theme="a" class="ui-content">
</div><div data-role="fieldcontain">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" class="required" value="" />
</div><div data-role="fieldcontain">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" class="required" value="" />
</div><button data-theme="b" id="submit" type="submit">Submit</button><br><br></form></div><!-- content --></body>- I am trying use a form validation script that seems to have a "small" problem that is takingtaking big to solve.When, I load the html page, i get a PAGE LOAD ERROR and the validation will not workon form submit. However, if I REFRESH the page, the form validation starts to work.This behaviour happens on chromo but the script does not work in explorer with orwithout refresh. Although, I do get the page load error as well.I am guessing the problem is with main.js but I cannot seem to find a solution from thejquery api documentation. Please, can somebody tell me what is wrong with this script..Thanks.============================================================================<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-------------------------------jquery.validate.js----------------------------------------><script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js "></script><!------------------------app.css------------------------------------------------------------><style>
label.error {
float: left;
color: red;
padding-top: .5em;
vertical-align: top;
font-weight:bold
}
</style><!-------------------------main.js---------------------------------------------------------><script>
$(document).on("pageshow", "#registerPage", function() {
$.validator.addMethod("passmatch", function(value) {
return value == $("#password").val();
}, 'Confirmation password must match.');$("#registerForm").validate({errorPlacement: function(error, element) {
if (element.attr("name") === "favcolor") {
error.insertAfter($(element).parent());
} else {
error.insertAfter(element);
}
}});});
</script>
</head>
<body>
<div data-role="page" id="registerPage"><div data-role="header">
<a href="index.html" data-rel="back">Home</a>
<h1>Register Page</h1>
</div><div data-role="content"><div id="errorBox"><ul></ul></div><form action="process.cfm" method="post" id="registerForm"><fieldset data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="required" minlength="5">
</fieldset><fieldset data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" minlength="5">
</fieldset><fieldset data-role="fieldcontain">
<label for="password2">Confirm Password:</label>
<input type="password" name="password2" id="password2" class="required passmatch" minlength="5">
</fieldset><fieldset data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" class="required email" minlength="5">
</fieldset><fieldset data-role="fieldcontain">
<label for="favcolor">Favorite Color:</label>
<select id="favcolor" name="favcolor" class="required">
<option value="">Select One</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</fieldset><fieldset data-role="fieldcontain">
<label for="hometown">Home Town:</label>
<input type="text" name="hometown" id="hometown">
</fieldset><input type="submit" value="Register"></form></div>
<div data-role="footer">
<h4>Registration</h4>
</div>
</div>
</body>
</html>- «Prev
- Next »
Moderate user : redchick
