Been trying to get this working for a few hours now but can't seem to get a result. Any advice would be welcomed with open arms! I'm using the JQuery Validation Plugin: http://jqueryvalidation.org/validate/. I have included the following into my file:
<script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/plugins/jquery-validation/dist/additional-methods.min.js"></script>
My form:
<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" class="form-vertical" name="personalInfo" id="personalInfo">
<label class="control-label">First Name</label>
<input type="text" class="m-wrap span8" name="fn" id="fn" value="<?php echo $userInfo['fn'] ?>"/>
<label class="control-label">Last Name</label>
<input type="text" class="m-wrap span8" name="ln" id="ln" value="<?php echo $userInfo['ln'] ?>"/>
<label class="control-label">Email Address</label>
<input type="text" class="m-wrap span8" name="email" id="email" value="<?php echo $userInfo['authemail'] ?>"/>
<label class="control-label">Mobile Number</label>
<input type="text" class="m-wrap span8" name="authmob" id="authmob" value="<?php echo $userInfo['authmob'] ?>"/>
<label class="control-label">Telephone</label>
<input type="text" class="m-wrap span8" name="authlan" id="authlan" value="<?php echo $userInfo['authlan'] ?>"/>
<label class="control-label">Company</label>
<input type="text" class="m-wrap span8" name="company" id="company" value="<?php echo $userInfo['company'] ?>"/>
<label class="control-label">Occupation</label>
<input type="text" class="m-wrap span8" name="profession" id="profession" value="<?php echo $userInfo['profession'] ?>"/>
<label class="control-label">Biography</label>
<textarea class="span8 m-wrap" rows="5" name="bio" id="bio"><?php echo $userInfo['bio']; ?></textarea>
<label class="control-label">Website Url</label>
<input type="text" class="m-wrap span8" name="url" id="url" value="<?php echo $userInfo['url'] ?>"/>
<label class="control-label">Facebook</label>
<input type="text" class="m-wrap span8" name="facebook" id="facebook" value="<?php echo $userInfo['facebook'] ?>"/>
<label class="control-label">LinkedIn</label>
<input type="text" class="m-wrap span8" name="linkedin" id="linkedin" value="<?php echo $userInfo['linkedin'] ?>"/>
<label class="control-label">Twitter</label>
<input type="text" class="m-wrap span8" name="twitter" id="twitter" value="<?php echo $userInfo['twitter'] ?>"/>
<button type="submit" name="personalInfo" id="personalInfo" class="btn green">
<i style="margin-right: 12px;" class="icon-save"></i> Save Information
</button>
</form>
My JavaScript using the plugin:
$('#personalInfo').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
fn: {
required: true,
minlength: 2,
lettersonly: true
},
ln: {
required: true,
minlength: 2,
lettersonly: true
},
email: {
required: false,
minlength: 6,
email: true
},
authmob: {
required: false,
number: true
},
authlan: {
required: false,
number: true
},
company: {
required: false
},
profession: {
required: false,
minlength: 2
},
bio: {
required: false,
minlength: 50
},
url: {
required: false,
url: true
},
facebook: {
required: false,
url: true,
minlength: 20
},
linkedin: {
required: false,
url: true,
minlength: 20
},
twitter: {
required: false,
url: true,
minlength: 20
}
},
messages: {
fn: {
required: "Please enter your first name.",
minlength: "Minimum of 2 characters.",
lettersonly: "Alphabetic characters only."
},
ln: {
required: "Please enter your last name.",
minlength: "Minimum of 2 characters.",
lettersonly: "Alphabetic characters only."
},
email: {
required: "Please enter your email address.",
minlength: "Minimum of 6 characters",
email: "Please enter a valid email address."
},
authmob: {
number: "Please enter a valid mobile number."
},
authlan: {
number: "Please enter a valid telephone number."
},
profession: {
minlength: "Minimum of 2 characters."
},
bio: {
minlength: "Minimum of 50 characters."
},
url: {
url: "Please enter a valid URL."
},
facebook: {
url: "Please enter a valid URL.",
minlength: "Minimum of 20 characters."
},
linkedin: {
url: "Please enter a valid URL.",
minlength: "Minimum of 20 characters."
},
twitter: {
url: "Please enter a valid URL.",
minlength: "Minimum of 20 characters."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-error', $('#personalInfo')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
window.location.href = "profile.php";
}
});
It doesn't do anything whatsoever but that's probably because I'm not experienced with JS at all. Could someone please guide me in the right direction?
