Develop Reference

In Jquery-Validate, how to refer to the name of an attribute in label?

I'd like to use the label text as the validation message. In order to do this, I tried to use $(label[for="nameAttrName"]), snippet here:
$("#myForm").validate({
rules: {
NameQuery: "required"
},
messages: {
NameQuery: "Please fill in " + $(`label[for="NameQuery"]`).text()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<form id="myForm">
<label for="NameQuery">Name Query </label>
<input name="NameQuery"/>
<input type="submit" value="Submit"/>
</form>
Question is, how can I refer to the attribute name in the for="" bit so I don't have to write for="NameQuery" explicitly? Like this

Question is, how can I refer to the attribute name in the for="" bit so I don't have to write for="NameQuery" explicitly?
Not sure why you would ever need to write this generically since you must list each and every field explicitly within the rules and messages objects anyway.
However, you could generically target the previous label element relative to the field being validated...
"Please fill in " + $(element).prev('label').text();
And it must be returned from within a function() in order to obtain the element argument from the plugin...
....
required: function(params, element) {
return "Please fill in " + $(element).prev('label').text();
}
....
DEMO:
$("#myForm").validate({
rules: {
NameQuery: {
required: true
}
},
messages: {
NameQuery: {
required: function(params, element) {
return "Please fill in " + $(element).prev('label').text();
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<form id="myForm">
<label for="NameQuery">Name Query </label>
<input type="text" name="NameQuery" />
<input type="submit" value="Submit"/>
</form>

Show error around radio buttons

The Jquery Validation plugin docs say you can validate that at least one radio button is selected. However, when trying to do so with some extra layout, I am not getting the error highlighting.
My code looks like this.
<div class="form-group" style="margin-top:25px;">
<label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label>
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<div class="form-control" style="height:auto;">
<div class="radio">
<label class="noBold-text" style="font-size: 1em">
<input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
</label>
</div>
<div class="radio">
<label class="noBold-text" style="font-size: 1em">
<input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
</label>
</div>
</div>
</div>
</div>
$("#forgotPasswordForm").validate({
rules: {
fpUsername: {
required: true,
minlength: 3
},
factorSelect: {
required: true
}
},
messages: {
fpUsername: {
required: "Please enter your username or email",
minlength: "Your username must be at least {0} characters"
},
factorSelect: {
required: "You must select a recovery method"
},
},
highlight: function (element, errorClass, validClass) {
$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
},
});
The has-error class never gets applied to the radio button group.

I reproduced the error you have in this CodePen...
The error message produced by jQuery Validate is positionned right after the invalid element... Which is the default.
Now you can position that error message elsewhere, using errorPlacement.
In this Solution, I just placed it right after the parent .input-group. I'm sure that is the puzzle piece you where looking for.
;)
errorPlacement: function(errorLabel, invalidElement){
if( $(invalidElement).is("[type='radio']") ){
var inputGroup = $(invalidElement).closest(".input-group");
inputGroup.after(errorLabel);
}
},
EDIT
With your full code, that is easier to work...
;)
The default behavior of a button in a form is to submit (Reference, see "type").
So if the type is omitted, that is what it does.
And the .validate() function isn't triggered by a button type="button".
So...
You have to prevent the default submit in order to validate first.
Then, submit if the form is valid.
This is achieved by .preventDault() and submitHandler
$("#forgotPasswordForm").on("submit",function(e){
e.preventDefault(); // Prevents the default form submit (Have to validate first!)
})
.validate({
// Skipping some lines here...
submitHandler: function(form) {
form.submit(); // Submits only if the form is valid
}
});
Updated CodePen

Ok, fixed it. Thank you for the help above with the placement of the error message. That was not my initial issue but did come up once I got the error to display at all. Your fix works great.
My primary issue turned out to be a CSS conflict with some styles that turn the radio buttons into pretty font-awesome icons. The little snippet that hides the default radio buttons causes the validation to fail as it must only look for visible fields. I set the height to zero instead and so far it seems to work.
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
/*display: none;*/
height:0;
}

Unable to validate bootstrap

I have the following jquery code
$().ready(function){
$("#Form").validate({
rules:{
DL:{
minlength:2
}
}
});
}
message:{
DL:{
minlength:"DL should be of at least 5";
}
}
The validation required is that the field DL should have length of 5.
The html code is below
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input
type="text" class="form-control" id="DL" required>
</div>
But the page does not seem to validate, after clicking a button, instead of showing message the page just scrolls upwards.

Here is your solution
https://jsfiddle.net/geradrum/far1fj1n/
All the code have syntax errors.
And the $() should be $(document)

The main problem is that the rules object looks for the element's name and you were using the id of the element.
index.html
<form id="FORM">
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input type="text" class="form-control" name="DL" required>
</div>
<input type="submit" value="Validate!">
</form>
app.js
$(document).ready(function(){
$( "#FORM" ).validate({
rules: {
DL: {
required: true,
minlength: 5
}
},
messages: {
DL: "DL should be of at least 5"
}
});
});

validate name with jquery with some custom functions

I am working on simple form validation with jQuery
In fact I used jQuery plugin to validate email address field, now I wanna put an individual validation for name field I tried it too, but it's not working and I am unable to figure out the problem behind.
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
$( "#myform" ).validate({
rules: {
name: {
required: true,
minlength: 4,
maxlength: 20,
customvalidation: true
}
},
messages: {
name: {
required: "Dude, enter a name",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}
}
});
$.validator.addMethod("customvalidation",
function(value, element) {
return /^[A-Za-z\d=#$%#_ -]+$/.test(value);
},
"Sorry, no special characters allowed"
);
});
</script>
</head>
<body>
<div id="navbar">
<ul id="nav">
<li><a id="clickBack" href="backPage.htm">clickBack</a></li>
<li><a id="clickForward" href="forwardPage.htm">goForward</a></li>
</ul>
</div><br><br>
<label for="field"> Name: </label>
<input class="left" id="name" name="name" minlength="4" class="required name"/>
<br/>
<form id="myform" method="post" action="">
<label for="field">Email: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
need some guidance... Thanks.

Try using this best JQuery validation plugin
username: {
required: true,
minlength: 2
},
messages: {
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
If you want custom validation you can try this:
$.validator.addMethod("customvalidation", function(value, element) {
return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
}, "Username must contain only letters, numbers, or dashes.");

Hi a few points which might help this work :
Try use an id that is not "reserved" or ambiguos (since name is already an attribute of the element it could be misleading. When I got your script working on my side, it would work with id="firstName" for eg. but not id="name")
Make sure the element you're validating is in the form you're running the validation on (in your code sample, the name element is sitting outside myform
Combine the two $("#myform").validate(...) methods in two different script blocks, you don't need a seperate one for email and name, you can list them together!
Hope that helps, good luck!

How do I use Jquery Validate to validate a password but not require it?

I am wondering if anyone has used the Jquery Validate Password plugin ( http://bassistance.de/jquery-plugins/jquery-plugin-password-validation/) to validate passwords but not require them.
In my case, I am putting together an edit user form. A user cannot exist without having a password. So when an admin is editing a user, I know that a password has already been validated and assigned to the user.
I want the Admin to be able to submit the form and leave the password fields blank. This means that the password was not changed. But, if the admin does want to change the password, I want to use jquery validate password (linked above) to validate the password.
In my html <head>, I have:
<script src="/Scripts/Common/jquery.js" type="text/javascript"></script>
<script src="/Scripts/Common/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/Common/jquery-validate.password/jquery.validate.password.js" type="text/javascript"></script>
<link href="/Scripts/Common/jquery-validate.password/jquery.validate.password.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
$("#edit").validate();
$("#password").valid();
});
</script>
and in the form field (in Razor and MVC syntax):
#using (Html.BeginForm("Edit", "User", FormMethod.Post, new { id = "edit" })) {
#Html.ValidationSummary()
#Html.HiddenFor(model => model.UserAccount.UserAccountId)
<!-- other user fields removed for brevity -->
<table>
<tr>
<th>Password</th>
<td>
#Html.PasswordFor(x => x.Password, new { id="password", #class="password"})
#Html.ValidationMessageFor(x => x.Password)
</td>
<td>
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</td>
</tr>
</table>
<p>
<button type="submit">Save</button> #Html.ActionLink("Nevermind", "Index")
</p>
}
This works great. Though it requires a password to be entered. Can I modify it to not require the password and only validate it?

just use
$("#edit_form").validate({
rules: {
re_password: {
equalTo: "#password"
}
},
messages: {
re_password: {
equalTo: "Password does not match"
}
}
});
without use class "required" in input field
<input id="password" type="password" name="password" class="TextBox">
<input id="re_password" type="password" name="re_password" class="TextBox">

Try this
$(document).ready(function() {
$("#edit").validate(
rules: {
password: { required: false }
},
);
$("#password").valid();
});