jQuery Validation
jQuery Validation
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
mktSignup.js 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);
});
};
[/u]