[jQuery] jQuery Validation Problem
hi all,
iam new to jQuery. I used jQuery validation in my project. Validation
is working perfect. But i cannot submit form. While iam submitting
form iam getting an alert "submit! use link below to go to the other
step". This alert message comming from [u]mktSignup.js[/u] file. Here
iam display my codes. Please help me. All my project stuck because of
this problem.
///////////////////////////////////////////////////////////////////////////////
My JSP page:
/////////////////////////////////////////////////////////////////////////////
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../
includes/Validation/stylesheet.css" />
<script language="JavaScript" type="text/javascript" src="../includes/
Validation/jQuery.js"></script>
<script src="../includes/Validation/jquery.validate.js" type="text/
javascript"></script>
<script type="text/javascript" src="../includes/Validation/
jquery.maskedinput.js"></script>
<script type="text/javascript" src="../includes/Validation/
mktSignup.js"></script>
<script type="text/javascript" src="../includes/Validation/
jquery.validation.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$
("#fld1,#inter,#fld3,#fld4,#fld5,#fld6,#fld7,#fld8,#fld9").attr({value:""});
$("#fld1").validation();
$("#Zipcode").validation({ type: "int" });
$("#MobileCode").validation({ type: "int" });
$("#City").validation({ type: "alpha" });
$("#fld4").validation({ type: "upper" });
$("#fld5").validation({
type: "alphasInt",
add: ".,()"
});
});
</script>
</head>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0>
<form id="profileForm" name="profileForm" method="post"
action="Client_create.jsp">
<div align="left"><br />
</div>
<div class="error" style="display:none;">
<div align="left"><img src="../images/warning.gif"
alt="Warning!" width="24" height="24" style="float:left; margin: -5px
10px 0px 0px; " />
<span></span>.<br clear="all" />
</div>
</div>
<table width="85%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="33%" height="22" align="left"
valign="middle">Name <img src="../images/backRequiredGray.gif"
border="0" /> </td>
<td width="67%" height="22" align="left"
valign="middle">
<input type="text" class="textbox required" title="Enter
client name" name="Name" /></td>
</tr>
<tr>
<td height="22" align="left" valign="middle">City <img
src="../images/backRequiredGray.gif" border="0" /> </td>
<td height="22" align="left" valign="middle">
<input type="text" class="textbox required" title="Enter
city" name="City" id="City" /></td>
</tr>
<td height="22" align="left" valign="middle">Zip code
<img src="../images/backRequiredGray.gif" border="0" /> </td>
<td height="22" align="left" valign="middle">
<input type="text" class="textbox required" title="Enter postal
code" name="Zipcode" id="Zipcode" /></td>
</tr>
<tr>
<td height="22" colspan="2" align="center"
valign="middle">
<input type="submit" name="submit" value="Submit" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
</body>
</html>
//////////////////////////////////////////////////////////////////////////
mktSignup.js
/////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
jQuery.validator.addMethod("password", function( value, element ) {
var result = this.optional(element) || value.length >= 6 && /
\d/.test(value) && /[a-z]/i.test(value);
if (!result) {
element.value = "";
var validator = this;
setTimeout(function() {
validator.blockFocusCleanup = true;
element.focus();
validator.blockFocusCleanup = false;
}, 1);
}
return result;
}, "Your password must be at least 6 characters long and contain at
least one number and one character.");
// a custom method making the default value for companyurl
("http://") invalid, without displaying the "invalid url" message
jQuery.validator.addMethod("defaultInvalid", function(value, element)
{
return value != element.defaultValue;
}, "");
jQuery.validator.addMethod("billingRequired", function(value,
element) {
if ($("#bill_to_co").is(":checked"))
return $(element).parents(".subTable").length;
return !this.optional(element);
}, "");
jQuery.validator.messages.required = "";
$("form").bind("invalid-form.validate", function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted
below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
}).validate({
//focusInvalid: false,
//focusCleanup: true,
onkeyup: false,
submitHandler: function() {
$("div.error").hide();
alert("submit! use link below to go to the other step");
},
messages: {
password2: {
required: " ",
equalTo: "Please enter the same password as above"
},
email: {
required: " ",
email: "Please enter a valid email address, example:
you@yourdomain.com",
remote: jQuery.format("{0} is already taken, please enter a
different address.")
}
},
debug:true
});
$(".resize").vjustify();
$("div.buttonSubmit").hoverClass("buttonSubmitHover");
if ($.browser.safari) {
$("body").addClass("safari");
}
$("input.phone").mask("(999) 999-9999");
$("input.zipcode").mask("99999");
var creditcard = $("#creditcard").mask("9999 9999 9999 9999");
$("#cc_type").change(
function() {
switch ($(this).val()){
case 'amex':
creditcard.unmask().mask("9999 999999 99999");
break;
default:
creditcard.unmask().mask("9999 9999 9999 9999");
break;
}
}
);
// toggle optional billing address
var subTableDiv = $("div.subTableDiv");
var toggleCheck = $("input.toggleCheck");
toggleCheck.is(":checked")
? subTableDiv.hide()
: subTableDiv.show();
$("input.toggleCheck").click(function() {
if (this.checked == true) {
subTableDiv.slideUp("medium");
$("form").valid();
} else {
subTableDiv.slideDown("medium");
}
});
});
$.fn.vjustify = function() {
var maxHeight=0;
$(".resize").css("height","auto");
this.each(function(){
if (this.offsetHeight > maxHeight) {
maxHeight = this.offsetHeight;
}
});
this.each(function(){
$(this).height(maxHeight);
if (this.offsetHeight > maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight)));
}
});
};
$.fn.hoverClass = function(classname) {
return this.hover(function() {
$(this).addClass(classname);
}, function() {
$(this).removeClass(classname);
});
};