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;
}
})
Related
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>
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();
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>
to bring it to the point: my function isn't telling me anything when i submit the form. The url changes, but it seems like the function isnt fired. Please help!
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
});
});
</script>
Thanks in advance!
PS: Searched it already on google but didn't found a good result.
Use it:
$('form[name="contact"]').on('submit', function() {
$('.error').hide();
var name = $("input#name").val();
if (name.length == 0) {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email.length == 0) {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone.length == 0) {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
return true;
});
First, add the event parameter to the button click handler, like this:
$(".button").click(function(e)){
Then also change
return false;
To
e.preventDefault();
EDIT:
This code works for me. When you click the button with fields empty, form is not submitted and it shows the error text next to the first field. By the way, there is no php involved here, just html and jquery. Are you loading jquery in your page?
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function(e) {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
e.preventDefault();
return;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
e.preventDefault();
return;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
e.preventDefault();
return;
}
});
});
</script>