I am very new to jquery & javascript working on login page where Iam using simple jquery validation code. To check whether my username as john and the password pass if it was correct it has to redirect to other page. Else I need to show an error message.
<script type="text/javascript">
$(document).ready(function () {
$("#form1").validate({
debug: false,
rules: {
name: "required",
password: {
required: true,
minlength: 8
}
},
messages: {
name: "Please enter your name.",
password: "Please enter 8 letters minimum.",
}
});
});
</script>
The above code was checking the first rule where if it is empty or not but this itself not working. I am not getting any error label message.
Here is the fiddle Link
Thanks in advance
Regards
M
Your problem is in your HTML. validate binds properties by their name. Your inputs only have ids and no names. Take a look at my sample (jsfiddle). It performs correctly. You also had mismatching formId on your jquery validate method.
As stated in the comments I also added the external resource to the fiddle (.validate jquery plugin)
Html
<h1>Form Validation Example</h1>
<form id='form1' name='form1' method='post' action='' > <p>
Name: <input type='text' name='name' id='name' class='required' />
</p>
<p>
Email: <input type='text' name='password' id='password' class='required' />
</p>
<p>
<input type='submit' name='Submit' value='Submit' />
</p>
</form>
Javascript
$(document).ready(function(){
$("#form1").validate({
debug: false,
rules: {
name: "required",
password: {
required: true,
minlength: 8
}
},
messages: {
name: "Please enter your name.",
password: "Please enter 8 letters minimum.",
}
});
});
Related
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>
I have a form that uses a link to submit the results.
I'm using Jquery validation plugin.
I can get the form to validate if I use a normal button to submit the form.
How can I call the Jquery function from a hyperlink instead of a button.
Here's my jquery:
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter_form').validate({
rules: {
CONTACTS_EMAIL: {
required: true,
email: true
},
CONTACTS_PRIVACY_POLICY_AGREE: "required",
},
messages: {
CONTACTS_PRIVACY_POLICY_AGREE: "<?php echo $FRM_ERRMSG_CONTACTS_PRIVACY_POLICY_AGREE;?>",
CONTACTS_EMAIL: {
required: "<?php echo $FRM_ERRMSG_CONTACTS_EMAIL;?>",
email: "<?php echo $FRM_ERRMSG_CONTACTS_EMAIL_FORMAT;?>"
}
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
And here is my html (with some php inside to be ignored)
<form id="newsletter_form" name="newsletter_form" action="newsletter_submit.php" method="post" >
<br>
<div class="mc-field-group">
<input type="text" name="CONTACTS_EMAIL" placeholder="*<?echo $EMAIL_FIELD_TEXT;?>" style="width: 280px;font-size: 20px;" /><br>
<input type="checkbox" name="CONTACTS_PRIVACY_POLICY_AGREE"> <?echo $PRIVACY_POLICY;?> * <label for="CONTACTS_PRIVACY_POLICY_AGREE" class="error" style="display:none;"></label>
<input type="hidden" name="CONTACTS_LANGUAGE" value="<?echo $language;?>">
<div>
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' name='newsletter_form'>
<a style="margin-top:22px;" class="wsite-button external-link" onclick="document.getElementById('newsletter_form').submit()">
<span class="wsite-button-inner"><?echo $BUTTON_TEXT;?></span></a>
</div>
</div>
</form>
Try using jQuery to trigger the submit event:
onclick="$('#commentForm').submit();"
There's a lot that could be improved here, but that may fix your core problem. I remember something like this happening to me a long time ago.
I'm trying to make this piece of code work. But there is something wrong with it. I don't know what. Anyone care to help here.
Thanks
The problem is that when the form is submitted and it doesn't show any validation messages.
<?php
session_start();
include 'connection.php';
if(isset($_POST['submit'])){
$name=$_POST['name'];
$f_name=$_POST['f_name'];
$cell=$_POST['cell_no'];
$_SESSION['name']=$name;
$_SESSION['f_name']=$f_name;
$_SESSION['cell']=$cell;
}
?>
<html>
<head>
<script src="jquery-1.3.1.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#myForm").validate({
rules: {
name: "required",
f_name: "required",
cell_no: {
required: true,
minlenght: 11
}
},
messages: {
name: "Please state your name.",
f_name: "Father name is required.",
cell_no: {
required: "Please provide a contact number.",
minlength: "Minimum length is 11 digits"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<center>
<?php
echo #$_GET['sheikh'];
?>
</center>
<form method="POST" action="" id="myForm" novalidate="novalidate">
<center><h1>First Form</h1></center>
<h2>Basic Information</h2>
Name:<input type="text" name="name">
Father name:<input type="text" name="f_name">
Cell_no:<input type="text" name="cell_no">
<input type="submit" name="submit" value="next">
</form>
</body>
</html>
Please try checking the console log when you have this kind of issues.
You will come to know what is the problem.
when the page loads it shows,
"Uncaught TypeError: $(...).validate is not a function"
this means the required library not exists with you code.
Download it and insert in your page like
script src="jquery-1.3.1.min.js"
you did or give direct link if you doing this for learning purpose.
Problems in your script:
You have included jQuery twice on the page
You haven't included jQuery.validate.js
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!
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();
});