I have a form and i need to use to actions in it .
one for getting informations entered in the fields and redirect the user to another page and the other one for checking the email validation .
the email validation is for the first fields ,the other field is normal
here's my code :
<form name="myform" class="login" action="getinfo.php" method="POST">
<input name="f1" type="text" placeholder="email" autofocus/>
<input name="f2" type="password" placeholder="example2"/>
this is the js code for checking the first field for the email :
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
i have no idea how to use two actions in one form
Thanks in advance, hope I have been concise and precise enough.
To achieve what you want while keeping it as close to what you had, you can do:
function validateForm() {
var x = document.forms["myform"]["f1"].value; //changed to "myform" and "f1"
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
<!--onsubmit handler added to <form> -->
<form name="myform" class="login" action="getinfo.php" method="POST" onsubmit="return validateForm()">
<input name="f1" type="text" placeholder="email" autofocus/>
<input name="f2" type="password" placeholder="example2"/>
<input type="submit"> <!--submit button was missing -->
</form>
Note that the important part is the submit handler that runs when you submit the form and returns true if you want the form to be submitted or false otherwise, which you were missing.
It's also important to validate on the server side as well, otherwise any user may disable javascript and bypass the validation.
As a side note, changing the type of the email input to email already forces validation by the browser, which is easier.
Related
Okay so I know this is probably a headache for most of you but i'm having trouble figuring this out as javascript is not my strong suit.
I'm trying to basically get this one page to load if username and password is not blank but if it is blank I want it to alert to me (specifically window.alert()) that I have not inputted username and/or password.
I cannot seem to figure it out so here it is.
<button type="submit" id="enterButton" onclick="newPage()"><strong>Enter</strong></button>
there is my button where I put my function on
var username = getElementById("userName");
var password = getElementById("passWord");
function newPage() {
if(username.val().length==0 || password.val().length==0){
alert("please enter valid information");
return location.href = "newPage.html";
}
else{
location.href = "newPage.html";
}
}
and here is my failed attempt to initialize my idea.
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if (password==null || password==""){
alert("password can't be blank");
return false;
} else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
<html>
<body>
<body>
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
Try to check first if you can get the value of your username. If you're using plain javascript, you should use document.getElementById("userName").value.
I am a beginner in Javascript and am looking to find a solution to why the code below is not working.
I've reviewed several tutorials here on StackOverflow and believe it should work... but it's not.
The HTML looks like this:
<form id="personalInfo">
<h2>Email: </h2>
<input type="text" name="Email" id="Email">
<br>
</form>
<input type="button" onclick = "validateEmail()">
The Javascript looks like this:
function validateEmail()
{
var reg = /^([A-Za-z0-9_\-\.]){1,}\#([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
var address = document.forms[personalInfo].elements[Email].value;
if (reg.test(address) == false) {
alert ("Email not valid");
return false;
}
return true;
}
By my accounts, this should pop up an alert if the email address entered by the user is not valid.
Instead, nothing happens at all. I'm not sure if the test is even run.
function validateEmail() {
// There are, I feel, better version of this regex online
// You can check "https://emailregex.com/"
var reg = /^([A-Za-z0-9_\-\.]){1,}\#([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
// document.getElementById() - Easier to read & understand, and more widely used
var address = document.getElementById('Email').value;
// Corrected your returns - not the main issue in the function, but the old
// returns might have caused confusion
if (reg.test(address) == false) {
alert("Email not valid");
return false
}
return true
}
<form id="personalInfo">
<h2>Email: </h2>
<input type="text" name="Email" id="Email">
</form>
<!-- You had a typo on the onclick but has since been fixed -->
<input type="button" onclick="validateEmail()" value="Submit">
Two issues here:
1- In your HTML, you are missing an = sign here: onclick"validateEmail()" (Edit: seems you fixed it now)
2- in your Javascript, the indices personalInfo and Email are strings, wrap them in quotation marks:
var address = document.forms['personalInfo'].elements['Email'].value;
function validateEmail()
{
var reg = /^([A-Za-z0-9_\-\.]){1,}\#([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;
var address = document.forms['personalInfo'].elements['Email'].value;
if (reg.test(address)== false)
{
alert ("Email not valid");
return false
}
return true;
}
<form id="personalInfo">
<h2>Email: </h2> <input type="text" name="Email" id="Email"> <br>
</form>
<input type="button" onclick="validateEmail()">
When dealing with email inputs, set the input type to email instead of text - like so:
<input name="my-email" type="email" />"
Then the browser will perform validation on the input; such as if the input doesn't have the # present.
I want to create a guestbook application page in HTML which has 3 fields for the user to input:
Name
E-mail
Message
I wanna make the client check in JavaScript, so below are my snippets of code which I added in the head of the html page.
For the Name I need to put a condition so only letters can be entered, no numbers, no special characters, no spaces or empty field, so I made this
function Validate()
{
var x=document.forms["guest"]["email"].value;
var y=document.forms["guest"]["name"].value;
var regex=/^[a-zA-Z]+$/;
if( y==null || y=="" || (!y.match(regex)))
{
alert("Please enter your Name! ");
return false;
}
My question is: How can I insert a condition so the name must be bigger than 3 letters?
For the e-mail field I made this:
if(x==null || x=="")
{
alert("Please enter your email address!");
return false;
}
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
else
return true;
}
Here I don`t have any question.
For the message field I need to add a condition so the message must be bigger than 10 characters.
Can you help me with that?
Thanks
You really dont even need javascript for this:
<form action="">
<input type="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" name="email" required title="Valid email required" required>
<br>
<input type="text" pattern="[a-zA-Z]{3,}" name="name" required title="Letters only and at least 4 characters" required>
<br>
<input type="text" pattern=".{10,}" name="message" required title="10 characters minimum" required>
<br>
<button>Submit</button>
</form>
You should take a look into the length property.
E.g.:
var y=document.forms["guest"]["name"].value;
if(y.length < 3) {
alert("Not a valid name");
return false;
}
Further informations for the length property on w3schools
An other option is to use the HTML5 minlength attribute:
<label>Username: <input name=u required minlength=3></label>
Further informations for the minlength attribute on W3
Here is my code:
<form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onSubmit="return GetTextValue()">
<input style="float:right;" id="nextbutton" name="" type="submit" value="Next" />
</form>
May i know, how and where can i add validate script to validate input email address.
If i blank or invalid id means it shows error states.
Can anyone help me? thanks in advance.
For input boxes, you can specify the type as email, and the browser will validate for you.
<input type="email" required>
Or for javascript:
function validate(emailString) {
return /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(emailString)
}
This will return true if the value for the emailString parameter is a valid email.
Lets assume you have an input field in your HTML as such -
<form name="emailForm">
<input type="email" id="email" name="email" />
</form>
In your javascript you can then add an event handler whenever a user activates
the text field and then clicks elsewhere (or uses tab to navigate to the next field)
$('#email').blur(function() {
// Instead of .blur() you can also just have the
// form submit event use the checkEmail() function.
checkEmail();
});
function checkEmail(){
var email = document.forms["emailForm"]["email"].value;
var atnum = email.replace(/[^#]/g, '').length
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || email.length <= dotpos + 2 || atnum > 1) {
// E-mail was not valid
$('#email').css({border: '1px solid #e74c3c'});
alert("Not a valid e-mail address");
setTimeout( function() {
$('#email').css({border: '1px solid #555'});
}, 800);
} else {
// E-mail was OK
alert("You're good to go!");
}
}
Here's a fiddle
(Formatted Properly now) ....
I have form as below:
<form style="padding:10px" id="myform" action="http://localhost/web/donedetails" method="post">
<div class="row half no-collapse-1">
<div class="6u">
<label><em>*</em> Your Name:</label>
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u">
<label><em>*</em> Your Email:</label>
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<button type="submit" class="rate" id="submit">Submit</button>
</form>
and i am validating form as below:
$(document).ready(function(){
$('#name,#email').keyup(function(){
if($('#name').val().length !=0){
$("#name").css("border-color","#CCC");
}
if($('#email').val().length !=0){
$("#email").css("border-color","#CCC");
}
});
$('#submit').click(function(){
var name = $('#name').val();
var email = $('#email').val();
if( name.length == 0){
$('#name').css("border-color","red");
}
if( email.length == 0){
$('#email').css("border-color","red");
}
if(name.length != 0 && email.length != 0 ){
$("#myform").submit();
return true;
}
return false;
});
});
While submit, form is not going to donedetails page. On clicking submit, again same page is returned on which i am currently.
Note: donedetails is a php page, i have written done details only as i have prohibited direct .php access to files.
Please help to resolve it
Ok, instead of complicating the comment. Let I'll post an answer with the code change I suggested.
$(document).ready(function(){
$('#name,#email').keyup(function(){
if($('#name').val().length !=0){
$("#name").css("border-color","#CCC");
}
if($('#email').val().length !=0){
$("#email").css("border-color","#CCC");
}
});
$('#myform').submit(function(){
var name = $('#name').val();
var email = $('#email').val();
if(!name ){ // this is enough to check empty string, undefined etc.
$('#name').css("border-color","red");
}
if( !email ){
$('#email').css("border-color","red");
}
if(name && email){
return;
}
return false;
});
});
Well I think that you must put an file extension for action script, because it decides which handler will be chosen at server-side.
I Figured out the problem... and it just drove me crazy :) .... how my code can nt work.
The problem was that there were two form tags.. and somehow i missed to close the first form tag..
so the button was submitting only the first form with blank action which is true :)
Finally, debugged the code and got the problem .... pheww.... just a small mistake and big impact it was