I am new to Jquery validation plugin.
I am trying to display the error message return by the validator below the control , currently it is displaying the error message beside the control to validate.
Any help would be appreciated.
My code below
<html>
<head>
<title>Index</title>
<script src="~/Scripts/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
$(document).ready(function () {
$('form').validate({
rules: {
myName: "required",
myPassword: "required"
},
messages: {
myName: "Please specify your name",
myPassword: "Please specify your password"
}
});
});
</script>
</head>
<body>
<form >
<label>Username</label>
<input type="text" name="myName" id="myName" placeholder="Type your username here..." /> <br/>
<label>Password</label>
<input type="text" name="myPassword" id="myPassword" placeholder="Type your password
here..." /> <br/>
<input type="submit" class ="btn btn-primary">
<button class=""> Clear <br/></button><br/>
</form>
</body>
</html>
If you want that error message should appear below from text field then replace your input field with below snippet.
<input type="text" name="myName" id="myName" placeholder="Type your username here..." style="display:block" />
<input type="text" name="myPassword" id="myPassword" placeholder="Type your password
here..." style="display:block" />
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form.html</title>
<style type="text/css">
body {
margin: 30px;
}
</style>
</head>
<body>
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
For Example,
In this page there are two forms. I want to get the form that has the input type = password. I don't want to get the form using its ID(getElementById) because I want to get a more general solution for getting the form, with input type = password out of multiple forms.
I have looked into document.forms.elements but I am not able to get to the solution. Please help.
Edit:
In this I have given a sample html code but my question is rather general. The answers given before this edit have used .parentNode() to get the parent node of the input tag. But if the input is under the tags such as <span> or <section> then the .parentNode() would not give the <form> tag. Keeping that in mind, how to get the form tag with input type = password from a page with multiple forms using Javascript DOM?
As your HTML stands now, you can try using querySelector() and parentNode like the following way:
var passForm = document.querySelector('input[type=password]').parentNode;
console.log(passForm);
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
The easiest way to do this is with jQuery.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
<script>
$("form>input[type='password']").parent();
</script>
</body>
I've tried all that recommended here to similar posters but nothing has working.
please let me know, what I'm doing wrong?
here is the simple code from one of the examples, and works fine when I've tried on jsfiddle, but once i run it on my web page...the button is disable but javascript shows mistake 21(Uncaught ReferenceError: $ is not defined) here is the original link
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>
<script>$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
if(allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}</script>
You need to include jquery($) in your code.
Easiest way is to include the below line before your script tag where allFilled() logic resides. You can also place it in the <head> tag. But make sure any code which makes use of $ (jquery) remain after the including jquery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
if (allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if ($(this).val() == '') filled = false;
});
return filled;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br /> Password
<br />
<input type="text" id="pass_input" name="password" /><br /> Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br /> Email
<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>
I have one form that contains additional sub forms (contained as divs) for example:
<form method="post" action="/process" id="form">
<div id="initForm">
<input type="text" name="name" placeholder="Please enter your name" />
<input type="email" name="email" placeholder="Please enter your email" />
<button class="next">Continue</button>
</div>
<div class="subForm">
<input type="text" name="jobPosition" placeholder="Please enter your job position" />
<input type="text" name="jobCompany" placeholder="Please enter your company" />
<button class="next">Continue</button>
</div>
<input type="submit" name="submit" value="Send" />
</form>
I want to use the validate plugin for the form, so whenever someone presses on next I want to validate this particular part of this form it validates before it lets you continue. I am therefore wondering is this possible to do this? I have used the below, but this is not doing anything. It gives no errors and is not validating the form. Can anyone tell me where I am going wrong?
$("form#initForm").validate({
rules: {
name: "required",
},
messages: {
name: "Please enter a valid name"
}
});
Your id of the form is different of the one you use in jQuery and the $('form#form") should be either $('form#form') or $("form#form").
See the working snippet below:
$(document).ready(function() {
$('#form').validate({
rules: {
name: "required",
jobPosition: "required"
},
messages: {
name: "Please enter a valid name",
jobPosition: "Please enter a valid job"
}
});
$('.next').on('click', function(e){
e.preventDefault();
$(this).parent().find('input:first').valid();
});
});
label.error{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<form method="post" action="" id="form">
<div id="initForm">
<input type="text" name="name" placeholder="Please enter your name" />
<input type="email" name="email" placeholder="Please enter your email" />
<button class="next">Continue</button>
</div>
<div class="subForm">
<input type="text" name="jobPosition" placeholder="Please enter your job position" />
<input type="text" name="jobCompany" placeholder="Please enter your company" />
<button class="next">Continue</button>
</div>
<input type="submit" name="submit" value="Send" />
</form>
I have this code below which validates a form. However, there is a bug in this code. When I enter something in username and leave the password blank, the form accepts it. It shouldn't be accepting it. Any idea why?
<html>
<head> <link type = "text/css" type="text/javascript" rel="stylesheet" href="css/bootstrap.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="js/bootstrap.js"> </script>
<script>
$(document).ready(function() {
$('form').validate({
submitHandler: function(form) { // for demo
alert('valid form');
return false;
}
});
});</script>
</head>
<body>
<form class="well span6">
<label>Username</label>
<input type="text" id="myName" class="span3 required" placeholder="Type your username here..." /> <br/>
<label>Password</label>
<input type="text" id="myPassword" class="span3 required" placeholder="Type your password here..." /> <br/>
<input type="submit" class ="btn btn-primary">
<!-- <button class=""> Clear <br/></button><br/> -->
</form>
</body>
</html>
I'm pretty sure this validation plugin like a 'name' attribute on the field.
I've added name="myName and name="myPassword on each input and it seems to work in this jsfiddle
<form class="well span6">
<label>Username</label>
<input name="myName" type="text" id="myName" class="span3 required" placeholder="Type your username here..." /><br/>
<label>Password</label>
<input name="myPassword" type="text" id="myPassword" class="span3 required" placeholder="Type your password here..." /><br/>
<input type="submit" class="btn btn-primary">
</form>
Try to by adding the "name" attribute, to the password and username fields.
My form is submitted by a link using JavaScript, but I am also trying to validate the from justing jQuery validate. The validation doesn't work when submitted by the link, but it does if I change the link to a submit button. What am I doing wrong?
My form:
<form id="findmatch" method="post" action="search">
<div>
<label class="formlabel">Match Type
<input type="text" name="matchtype" id="matchtype" class="forminput" />
</label>
<label class="formlabel">Location (postcode)
<input type="text" name="location" id="location" class="forminput" />
</label>
<label class="formlabel">Radius (miles)
<input type="text" name="Radius" id="Radius" class="forminput" />
</label>
<label class="formlabel">Keywords
<input type="text" onblur="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" onchange="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" name="keywords" id="keywords" class="forminput" />
</label>
<input id="lat" class="hidden" name="lat" type="text" value="" />
<input id="lon" class="hidden" name="lon" type="text" value="" />
Search
</div>
</form>
And my jQuery is
<script type="text/javascript">
$(document).ready(function () {
$("#findmatch").validate({
rules: {
location: "required",
Radius: {
required: true,
digits: true
},
keywords: "required"
},
messages: {
location: "Please enter your postcode",
Radius: {
required: "Please enter a radius",
digits: "Please only enter numbers"
},
keywords: "Please enter the keywords you wish to search for"
}
});
});
</script>
DEMO: http://jsbin.com/urole/3
$(function () {
$('#submit').click(function(e) {
e.preventDefault();
$("#commentForm").submit();
});
$("#commentForm").validate();
});
submit