I have to make a form that has a username and password but the password must be five or more characters. I have tried a lot of different methods but none have succeded.
Here's my javascript:
funtion validateForm(){
var password = document.getElementById('password').value;
if (password.length < 5)
alert("Password must be longer");
return false;
}
}
and my HTML:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<script src="js/script.js" charset="utf-8"></script>
</head>
<body>
<div id="error">
</div>
<form name="formname" action="/action_page.php" onsubmit="validateForm()" method="post">
<div>
<label for="name">Username:</label>
<input id="username" name="name" type="text" required>
</div>
<div>
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
You need to use Event.preventDefault() to prevent the form submit on validation fail. And to do that you need to pass the event to your handler like onsubmit="validateForm(event)".
See the code snippet to understand how it works.
function validateForm(event) {
var password = document.getElementById('password').value;
if (password.length < 5) {
event.preventDefault(); // <--- ADDED
alert("Password must be longer");
return false;
}
}
<div id="error">
</div>
<form name="formname" action="/action_page.php" onsubmit="validateForm(event)" method="post">
<div>
<label for="name">Username:</label>
<input id="username" name="name" type="text" required>
</div>
<div>
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
</form>
Related
All responses and help is greatly appreciated!
HTML:
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
JAVASCRIPT:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
};
Are you sure you imported the file containing your Javascript into the HTML? See below:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
}
<html>
<head>
</head>
<body>
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
<script src="script.js"></script>
</body>
</html>
I am Trying to validate the password and confirm password using javascript but not working , here is my code can anyone tell whats wrong with it ?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
var pass,cpass;
pass= document.getElementByName("password")[0].value;
cpass= document.getElementByName("cpassword")[0].value;
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
You Can try this
First of all replace button type "submit" to "button". Submit button will always submit your form before JQuery works.
HTML
<form>
<label>Password : </label><input class="ip1" type="password" id="password" required/>
<label>Confirm Password : </label><input class="ip1" type="password" id="cpassword" required/>
<input type="button" value="submit" id ="BtnSubmit" />
</form>
JS
$("#BtnSubmit").click(function(){
var pass,cpass;
pass= $("#password").val();
cpass= $("#cpassword").val();
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
$("form").submit();
});
Codepen : http://codepen.io/anon/pen/xqxyzq
Try this
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
var pass,cpass;
pass= document.getElementById("pass").value;
cpass= document.getElementById("cpass").value;
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" id="pass" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" id="cpass" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Try this.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
if($("#pwd").val() != $("#cpwd").val()){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" id="pwd" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" id="cpwd" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
you mistyped getElementByName and it should be getElementsByName
<html>
<head>
</head>
<body>
<script type="text/javascript">
function validateForm() {
var pass,cpass;
pass = document.getElementsByName("password")[0].value;
cpass = document.getElementsByName("cpassword")[0].value;
if(pass!=cpass){
alert("Password And Confirm Password Should Be Same");
return false;
}
}
</script>
<form name="form1" onsubmit="return validateForm()">
<label>Password : </label><input class="ip1" type="password" name="password" required/>
<label>Confirm Password : </label><input class="ip1" type="password" name="cpassword" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
its document.getElementsByName("password")[0].value;..its not getElement its document.getElementsByName(""cpassword"").value; ....and also call validate function in submit button
onclick=validateForm();
I am looking for javascript validation on email form field. On submit i want to validate if email contains #specifieddomain.com then submit else error message "please use your company email"
<div id="openModal" class="modalDialog">
<div>
X
<p><form id="microsubs_form" method="post" action="/" class="" >
<input type="text" id="ms_firstName" required="true" placeholder="First Name" style="margin-bottom:20px;">
<input type="text" id="ms_lastName" required="true" style="float:right; alignment-adjust:central; clear:right" placeholder="Last Name" style="margin-bottom:20px;">
<input type="email" id="ms_email" required="true" style="float:left;" placeholder="Corporate Email address">
<input type="number" id="ms_telephoneNumber" required="true" style="float:right; alignment-adjust:central; clear:right">
</form></p>
<p></p>
</div>
</div>
thanks
1) in HTML
change input email like this :
<input type="email" pattern="\w+#specifieddomain\.com" style="float:left;" placeholder="Corporate Email address">
final code :
<html>
<head>
</head>
<body>
<div id="openModal" class="modalDialog">
<div>
X
<p><form id="microsubs_form" method="post" action="/" class="" >
<input type="text" id="ms_firstName" required="true" placeholder="First Name" style="margin-bottom:20px;">
<input type="text" id="ms_lastName" required="true" style="float:right; alignment-adjust:central; clear:right" placeholder="Last Name" style="margin-bottom:20px;">
<input type="email" pattern="\w+#specifieddomain\.com" style="float:left;" placeholder="Corporate Email address">
<input type="number" id="ms_telephoneNumber" required="true" style="float:right; alignment-adjust:central; clear:right">
<input type="submit">
</form>
<p></p>
</div>
</div>
</body>
</html>
2) in javascript
change form like this
<form id="microsubs_form" method="post" action="/" class="" onsubmit="return validEmail()" >
and use test Method,
<script>
var emil = document.getElementById("email");
var patt = /\w+#specifieddomain\.com/;
function validEmail() {
if (!patt.test(emil.value)) {
alert("please use your company email");
return false;
}
else
return true;
}
</script>
final code :
<html>
<head>
</head>
<body>
<div id="openModal" class="modalDialog">
<div>
X
<p><form id="microsubs_form" method="post" action="/" class="" onsubmit="return validEmail()" >
<input type="text" id="ms_firstName" required="true" placeholder="First Name" style="margin-bottom:20px;">
<input type="text" id="ms_lastName" required="true" style="float:right; alignment-adjust:central; clear:right" placeholder="Last Name" style="margin-bottom:20px;">
<input id="email" style="float:left;" placeholder="Corporate Email address">
<input type="number" id="ms_telephoneNumber" required="true" style="float:right; alignment-adjust:central; clear:right">
<input type="submit">
</form>
<p></p>
</div>
<script>
var emil = document.getElementById("email");
var patt = /\w+#specifieddomain\.com/;
function validEmail() {
if (!patt.test(emil.value)) {
alert("please use your company email");
return false;
}
else
return true;
}
</script>
</div>
</body>
</html>
<script type="text/javascript">
function emailvalidator(){
var email = document.getElementById('ms_email').value;
if(email.search("#yourdomain.com")!=-1){
alert("wrong email");
}else{
alert("email is valid!");
}
}
</script>
add this function in your file, then call this function on submit.
Try this..
$('#microsubs_form').on('submit',function(){
var email = $('#ms_email').val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
})
I have a simple form to take user input. User must fill very fields in that form. If they don't, javascript gives the alert message but it's not working. I am not getting alert message if I submit the form empty. Here's my form.html:
</style>
<script type="text/javascript">
function Validate(){
if(document.simple_form.session.value == "" ||
document.simple_form.hostname.value == "" ||
document.simple_form.username.value == ""
document.simple_form.password.value == "")
{
alert("Please fill out all fields before clicking Load!");
return false;
}
}
</script>
</head>
<body>
<form action="." method="post" onsubmit="return Validate();" name="simple_form">
{% csrf_token %}
<fieldset>
<legend>Session</legend>
<label for="input-one" class="float"><strong>Session Name:</strong></label><br />
<input class="inp-text" name="session" id="sess" type="text" size="30" /><br />
<label for="input-two" class="float"><strong>RemoteHost:</strong></label><br />
<input class="inp-text" name="hostname" id="host" type="text" size="30" onblur="if(this.value=='') { this.value='ngs.pradhi.com:/upload' }" onfocus="if(this.value=='ngs.pradhi.com:/upload') { this.value='' }" value="ngs.pradhi.com:/upload" />
<label for="input-three" class="float"><strong>Username:</strong></label><br />
<input class="inp-text" name="username" id="user" type="text" size="30" />
<label for="input-four" class="float"><strong>Password:</strong></label><br />
<input class="inp-text" name="password" id="pass" type="password" size="30" />
</fieldset>
<p><input class="submit-button" type="submit" value="Load" /></p>
<p><input class="save-button" type="reset" name="cancel" value="Cancel" /></p>
</form>
Is there something I am missing?
You're missing a final || in your Validate() function.
I've got a working jsfiddle here (I added a couple of </br>'s too).
I have a page where i am disabling the button after submit for 10 seconds and if validation succeeds form is submitted. However, the form is getting submitted even though validation is returning false.
I tried using
<input type="submit">
instead of image still same issue.
Below is the code:
<html>
<head>
<script>
function enableMe(myBtn) {
myBtn.disabled = false;
}
function doValidation() {
document.getElementById('hidden1').value = 'true';
return false;
}
</script>
</head>
<body>
<form id="loginForm" method="post" action="https://www.mySite.com/authService">
<label for="userid">Username</label><br/>
<input type="text" value="" id="userid" name="userid"/>
<br/>
<label for="password">Password</label>
<br/>
<input type="password" value="" id="password" name="password"/>
<br/>
<br/>
<input type="image" id="submitBtn" src="btn_login.gif"
onsubmit="this.disabled=true; setTimeout(enableMe,10000,this); return doValidation();">
<input type="hidden" id="hidden1" name="hidden1" value="false"/>
</form>
</body>
</html>
Validation should be attached to form, not input element...
<form id="whatever" ... onsubmit="return doValidation();">