How To Validate Cconfirm password using Javascript and html - javascript

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();

Related

Can't get form to validate

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>

javascript onsubmit is not correctly working

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>

JavaScript email validation contains specified address

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;
}
})

JavaScript: Form value is not being validated during submit

On this code, while i try to submit the form, am doing some validation on the input boxes, if the user-name input box value less than 6 and if there is no value, then, i am alerting alert("dshddhhdhdhh");. While I press the submit button, this alert is not working. Where is the mistake? Please.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
</head>
<body>
<form name="loginForm" method="post">
<input type="text" name="user-name" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="password1" placeholder="Confirm password"/>
<span class="password1">Password does not be match</span><span class="password">Password does not be match</span>
<input type="email" name="email" placeholder="Email" required/>
<input type="url" name="url" placeholder="Website"/>
<span class="url">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
window.onload = function(){
document.getElementsByName("user-name")[0].value="";
document.getElementsByName("password")[0].value="";
document.getElementsByName("password1")[0].value="";
document.getElementsByName("email")[0].value="";
document.getElementsByName("url")[0].value="";
document.getElementById("FormSubmit").style.display="none";
document.querySelector('span[class="user-name"]').style.display="none";
document.querySelector('span[class="password"]').style.display="none";
document.querySelector('span[class="password1"]').style.display="none";
document.querySelector('span[class="url"]').style.display="none";
document.getElementsByName("user-name")[0].focus();
}
var formElem = document.getElementsByName("loginForm")[0];
formElem.onsubmit = function(){
var returnValue=true;
if (loginForm.user-name.value.length < 6 ){
returnValue = false;
alert("dshddhhdhdhh");
return returnValue;
}
}</script>
</body>
</html>

Your form element is named user-name, but you're checking username. Change
if (loginForm.username.value.length < 6 ){
to
if (loginForm['user-name'].value.length < 6 ){
window.onload = function(){
document.getElementsByName("user-name")[0].value="";
document.getElementsByName("password")[0].value="";
document.getElementsByName("password1")[0].value="";
document.getElementsByName("email")[0].value="";
document.getElementsByName("url")[0].value="";
document.getElementById("FormSubmit").style.display="none";
document.querySelector('span[class="user-name"]').style.display="none";
document.querySelector('span[class="password"]').style.display="none";
document.querySelector('span[class="password1"]').style.display="none";
document.querySelector('span[class="url"]').style.display="none";
document.getElementsByName("user-name")[0].focus();
}
var formElem = document.getElementsByName("loginForm")[0];
formElem.onsubmit = function(){
var returnValue=true;
if (loginForm['user-name'].value.length < 6 ){
returnValue = false;
alert("dshddhhdhdhh");
return returnValue;
}
}
<form name="loginForm" method="post">
<input type="text" name="user-name" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="password1" placeholder="Confirm password"/>
<span class="password1">Password does not be match</span><span class="password">Password does not be match</span>
<input type="email" name="email" placeholder="Email" required/>
<input type="url" name="url" placeholder="Website"/>
<span class="url">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>

Simple javascript form validation not working in Django?

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).

Categories

Resources