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
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'm using bootstrap for a login page, I've seen people use the tag without the 'href' in bootstrap but it's not working for me, any ideas?
I'm just trying a simple alert atm before finishing, I will have the link switch between login and sign-up pages when I can get this working. At the moment it just appears as plain text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Secret Diary</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="login">
<div class="container">
<div class="center">
<div class="col-md-12 mx-auto">
<h1>Secret Diary</h1>
<h2>Store you thoughts</h2>
<div class="error"><?php echo $error; ?></div>
<form method="post" id="signupForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="1">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
<p><a id="showLogInForm">Log In</a></p>
</form>
<form method="post" id="loginForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="0">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
</form>
</div>
</div>
</div>
</section>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#showLogInForm").click(function(){
alert("hi!");
});
</script>
</body>
</html>
Try this:
Log In
You have to use <button> with some classes
<button class="btn btn-link p-0">Button</button>
You probably need need a href attribute, most browsers' default styling is setup to display a tags without href as plain text.
<a>some link</a>
<br />
some other link
you can just use the a tag without href like this:
<a id="showLogInForm">Log In</a>
please refer to the code below for details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Secret Diary</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="login">
<div class="container">
<div class="center">
<div class="col-md-12 mx-auto">
<h1>Secret Diary</h1>
<h2>Store you thoughts</h2>
<div class="error"><?php echo $error; ?></div>
<form method="post" id="signupForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="1">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
<p><a id="showLogInForm">Log In</a></p>
</form>
<form method="post" id="loginForm">
<input type="email" class="form-control" name="email" id="email" placeholder="email">
<input type="password" class="form-control" name="password" id="password" placeholder="password">
<div class="checkbox">
<label>
<input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
</label>
</div>
<input type="hidden" name="signUp" value="0">
<input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
</form>
</div>
</div>
</div>
</section>
<script>
$( document ).ready(function() {
$("#showLogInForm").click(function(){ alert("hi!"); });
});
</script>
</body>
</html>
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.
Following code is working when I am passing a correct session ID to the viewstate. but not working without session ID. Is it possible what I am trying.
What I have tried is:---
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body >
<form id="login" name="login" method="post" action="http://thirdPartySite/jsf/security/login.jsp" >
<input type="hidden" name="login" value="login">
<div >
<input id="userName" type="hidden" name="userName" autocomplete="off" value="yyyyy">
</div>
<div >
<input id="password" type="hidden" name="password" autocomplete="off" value="xxxx" >
</div>
<div >
<input type="submit" name="j_id_jsp_623365074_6" value="Login" ><br>
</div>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="712612493959427831:-20824210214191552" autocomplete="off">
</form>
</div>
</div>
</div>
</body></html>
Is from 2 hours that im trying to understand how to use jQuery with a file html, but I can't figure it out!
I want a simple strngh password using jQuery and I found this useful link: http://jsfiddle.net/jquery4u/mmXV5/
My problem now is how allow file html communicate with this script?
my file html is very simple:
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
As you see, javascript file of the link is very consistent so I want to put all codes into another file, but after that I really don't know how to link 2 file and work togheter!
Here is a useful link that could help you learn more about jQuery.
You need to add this to your file (in the head or right BEFORE closing the body tag).
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
This allows you to use the jQuery library.
After you include the ajax library from google (this is preferable to be added inside the <head> *insert here </head> tags.
Now, if you have an external js file, you just add your jQuery code to it and simply import it in your html file.
<script src="yourFileWithJquery.js"></script>. Note that the js file has to be in the same folder with your html file.
Now you are good to go.
Here is a good example on your code:
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="myJsFile.js"></script>
</head>
<body>
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
</body>