<html lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Form Validator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
</head>
<form action="" id="registration-form">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>E-mail</td>
<td><input id="email" name="email" data-validation="email"></td>
</tr>
<tr>
<td></td>
<td><label for="email" generated="true" class="error"></label></td>
</tr>
<tr>
<td>User name</td>
<td> <input id="user" name="user" data-validation="length alphanumeric"
data-validation-length="3-12"
data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)"></td>
</tr>
<tr>
<td></td>
<td><label for="user" generated="true" class="error"></label></td>
</tr>
<tr>
<td>Password</td>
<td><input id="pass_confirmation" name="pass_confirmation" data-validation="strength"
data-validation-strength="2"></td>
</tr>
<tr>
<td></td>
<td><label for="pass_confirmation"></label></td>
</tr>
<tr>
<td>Repeat password</td>
<td><input name="pass" data-validation="confirmation"></td>
</tr>
<tr>
<td>Birth date</td>
<td><input name="birth" data-validation="birthdate"
data-validation-help="yyyy-mm-dd"></td>
</tr>
<tr>
<td>Country</td>
<td><input name="country" id="country" data-validation="country"></td>
</tr>
<tr>
<td>Profile image</td>
<td><input name="image" type="file" data-validation="mime size required"
data-validation-allowing="jpg, png"
data-validation-max-size="300kb"
data-validation-error-msg-required="No image selected"></td>
</tr>
<tr>
<td>User Presentation (<span id="pres-max-length">100</span> characters left)</td>
<td><textarea name="presentation" id="presentation"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" data-validation="required"
data-validation-error-msg="You have to agree to our terms">
I agree to the <a href="..." target="_blank">terms of service</a></td>
</tr>
<tr>
<td><input type="submit" value="Validate"></td>
<td><input type="reset" value="Reset form"></td>
</tr>
</table>
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>
<script>
$.validate({
modules : 'location, date, security, file',
onModulesLoaded : function() {
//$('#country').suggestCountry();
}
});
// Restrict presentation length
$('#presentation').restrictLength( $('#pres-max-length') );
</script>
</html>
I was researching for form validation , after a time I have found jquery-form-validator plugin which will help me to validate . but now I am trying to find out how to change error position . As now all the errors are showing in front of the field name . I want to show the error for email in this
<label for="user" generated="true" class="error"></label>
and is there any form validation for php also
Use the attribute
data-validation-error-msg-containerto point out the location of an error message for a certain inputYou have some other alternatives as well when it comes to this. You can read about it on http://formvalidator.net/#configuration_position