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.
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>
Im using Bootstrap 3 and i want to validate a form usign data-toggle="validator" only that i want the submit button enabled and warn the user if an input field is empty when submit is clicked. Any help would be really apreciated!
Here´s an example of my code
<form id="checkout" method="post" data-toggle="validator">
<input class="form-control" type="text" required="required"
data-error="Please enter your name" placeholder="First name" />
<button id="inputForm" type="submit" class="btn btn-prio-one">
<span>Submit</span>
</button>
</form
Add the attribute data-disable="false" to the form tag and that should enable the Submit button.
<form id="checkout" method="post" data-toggle="validator" data-disable="false">
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<form data-toggle="validator" role="form" data-disable="false">
<div class="form-group">
<label class="control-label" for="inputName">Name</label>
<input class="form-control" data-error="Please enter your name" id="Name" placeholder="First Name" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">
Submit
</button>
</div>
</form>
<form id="checkout" method="post" data-toggle="validator">
<input class="form-control" type="text" required="required"
data-error="Please enter your name" placeholder="First name" />
<div class="help-block with-errors"></div>
<button id="inputForm" type="submit" class="btn btn-prio-one">
<span>Submit</span>
</button>
</form>
Try this code.
I am trying to validate my form using parsley.js, I am working as the official good book says to do so but due to some reasons (that I obviously don't know right now), it is not working.
Here is the code
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required />
<label>Email </label>
<input type="text" name="email" class="form-control" data-type="email" data-trigger="change" required />
<label>Password </label>
<input type="text" name="lname" class="form-control" data-type="password" required />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
Here is the Plunkr link.
I dont know how to save it so I'm posting it here:
I changed the jquery version, the parsley version (you used an old one), and also added the css from parsley site. Your tag attributes were wrong. this works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parsley JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.4/parsley.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Parsley JS Form Validation</h2>
<form data-parsley-validate="parsley">
<label>Name </label>
<input type="text" name="fname" class="form-control" required="true" />
<label>Email </label>
<input name="email" class="form-control" type="email" data-parsley-trigger="change" required="true" />
<label>Password </label>
<input name="lname" class="form-control" type="password" required="true" />
<br />
<input type="submit" class="btn btn-success" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
The problem was is was using data-required instead I have to use data-parsley-required and also instead of data-validate="parsley" it should be data-parsley-validate="parsley"
Plunkr modified
I am having trouble writing to the console with the following code. Unsure as to why it is not working as am a beginner JavaScript programmer. May be a stupid question because I am new to JavaScript.
Javascript:
function process(){
'use strict';
var user = document.getElementById("user").value;
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var age = document.getElementById("age").value;
console.log(user);
};
function init(){
'use strict';
document.getElementById('signUp').onsubmit = process;
};
window.onload = init;
html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Employee Register</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>
<body>
<form action="#" method="post" id="signUp" class="form">
<h1>Sign up.
<span>Please complete all information.</span>
</h1>
<label for="user">
<span>Username:</span>
<input type="text" name="user" id="user" required>
</label>
<label for="name">
<span>Full Name:</span>
<input type="text" name="name" id="name" required>
</label>
<label for="email">
<span>Email Address:</span>
<input type="email" name="email" id="email" required>
</label>
<label for="pass">
<span>Password:</span>
<input type="password" name="pass" id="pass" required>
</label>
<label for="age">
<span>Age:</span>
<input type="text" name="age" id="age" required>
</label>
<input type="submit" value="Submit" id="submit">
</form>
<div id="members" class="output">
<h1>Registered Members</h1>
</div>
<script src="register.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
The reason for this is that the log is renewed for every request (in case of Chrome browser) and as you are setting the console.log to be fired onsubmit the log is logged but will be cleared immediately
Check the checkbox Preserve Log in the console of Chrome.
You can change the input type to a normal button to prevent the submit <input type="button" value="Submit" id="submit">.
After doing whatever you want with the fields you can submit the form with signUp.submit() or document.getElementById('signUp').submit().
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" />