Good evening,
I currently have a HTML Form with a script to validate the field have data entry into them however after it validating all fields are filled it doesnt submit, can anybody please advise what is wrong? New to this so learning and would really appreciate any help possible.
I have attached the code im using below.
<div id="form">
<form name="contact" method="post" action="contact.php" onsubmit="return !!(validatename()&validateemail()&validatecomments()&validateRecaptcha());">
<table width="450px">
<tr>
<td valign="top"><label for="name">Name</label></td>
<td valign="top"><input type="text" name="name" maxlength="50" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="email">Email Address</label></td>
<td valign="top"><input type="text" name="email" maxlength="80" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="comments">Comments</label></td>
<td valign="top"><textarea name="comments" maxlength="1000" cols="32" rows="8"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<div id="form" class="g-recaptcha" data-sitekey="6LdcZFkUAAAAAFoHAYtupqKzCgd2T9XzHZFj8XNw"></div>
<input type="image" src="images/submit.png" alt="Submit">
</td>
</tr>
</table>
</form>
<script>
function validatename()
{
if( document.contact.name.value == "" )
{
alert( "Please provide your name!" );
document.contact.name.focus() ;
return false ;
}
}
function validateemail()
{
if( document.contact.email.value == "" )
{
alert( "Please provide your email address!" );
document.contact.email.focus() ;
return false ;
}
}
function validatecomments()
{
if( document.contact.comments.value == "" )
{
alert( "Please provide your comments!" );
document.contact.comments.focus() ;
return false ;
}
}
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("You need to fill the captcha");
return false ;
}
}
</script>
This is one way how you could do it:
function validatename() {
if (document.contact.name.value == "") {
alert("Please provide your name!");
document.contact.name.focus();
return false;
}
else {
return true;
}
}
function validateemail() {
if (document.contact.email.value == "") {
alert("Please provide your email address!");
document.contact.email.focus();
return false;
}
else {
return true;
}
}
function validatecomments() {
if (document.contact.comments.value == "") {
alert("Please provide your comments!");
document.contact.comments.focus();
return false;
}
else {
return true;
}
}
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("You need to fill the captcha");
return false ;
}
else {
return true;
}
}
document.getElementById('my-form').addEventListener('submit', function(e) {
e.preventDefault();
if (validatename() && validateemail() && validatecomments() && validateRecaptcha()) {
var formValidation = true;
}
else {
var formValidation = false;
}
if (formValidation) {
this.submit();
}
});
<div id="form">
<form id="my-form" name="contact" method="post" action="contact.php">
<table width="450px">
<tr>
<td valign="top"><label for="name">Name</label></td>
<td valign="top"><input type="text" name="name" maxlength="50" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="email">Email Address</label></td>
<td valign="top"><input type="text" name="email" maxlength="80" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="comments">Comments</label></td>
<td valign="top"><textarea name="comments" maxlength="1000" cols="32" rows="8"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<div id="form" class="g-recaptcha" data-sitekey="6LdcZFkUAAAAAFoHAYtupqKzCgd2T9XzHZFj8XNw"></div>
<input type="image" src="images/submit.png" alt="Submit">
</td>
</tr>
</table>
</form>
</div>
To make it work correctly, make sure that grecaptcha is defined.
Related
Hi and sorry for my bad English
I have a contact page and i am using javascript to make a "captcha". so peaople must make a math and if thats correct they can send me a e-mail. Now my problem is that javasctipt give a alert that the math is wrong or not filled but the e-mail is still seended.
my html:
<script type="text/javascript">
function validate () {
var ta = document.getElementById("ta").value;
var answer = document.getElementById("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1+ digit2;
if (answer === null || answer === "") {
alert("reken de cijfers uit");
return false;
} else if (answer != sum){
alert("je som is fout");
} else if (ta === null || ta === ""){
alert("schrijf een bericht");
} else {
document.getElementById("answer").innerHTML = "bezig met sturen";
document.getElementById("answer").innerHTML = "";
}
}
function randNums () {
var rand_num1 = Math.floor(Math.random()*10)+1;
var rand_num2 = Math.floor(Math.random()*10)+1;
document.getElementById("digit1") .innerHTML=rand_num1;
document.getElementById("digit2") .innerHTML=rand_num2;
}
</script>
<body onload="randNums() ;">
<form action="/cgi-bin/form.cgi" method="POST" onsubmit="return validate ();">
<input type="hidden" name="DEBUG" value="0">
<input type="hidden" name="MAILFILE" value="peymankarimi/form/sjabloon.txt">
<input type="hidden" name="MAILTO" value="peyman_50#hotmail.com">
<input type="hidden" name="REPLYFAULT" value="peymankarimi/form/formulier.html">
<input type="hidden" name="REPLYOK" value="peymankarimi/form/verzonden.html">
<table border="0" width="374" id="contactformulier">
<tr>
<td width="137">Naam:</td>
<td width="230"><input type="text" size="31" name="naam" placeholder="Naam"></td>
</tr>
<tr>
<td width="137">Voornaam:</td>
<td width="230"><input type="text" size="31" name="voornaam" placeholder="Voornaam"></td>
</tr>
<tr>
<td width="137">Woonplaats:</td>
<td width="230"><input type="text" size="31" name="woonplaats" placeholder="Woonplaats"></td>
</tr>
<tr>
<td width="137">Telefoonnummer:</td>
<td width="230"><input type="text" size="31" name="telefoon" placeholder="Telefoonnummer"> </td>
</tr>
<tr>
<td width="137">E-mailadres: <br></br></td>
<td width="230">
<input type="text" size="31" name="MAILFROM" placeholder="E-mailadres"> <br></br> </td>
</tr>
</tr>
<tr>
<td width="137">Onderwerp:</td>
<td width="230"><input type="text" size="31" maxlength="30" name="SUBJECT"> </td>
</tr>
<tr>
<td colspan="2">Uw vragen, opmerkingen, suggesties, ... :<br>
<textarea id="ta" name="omschrijving" rows="6" cols="43" ></textarea>
<br />
<strong> Tel deze cijfers op </strong>
<span id="digit1"> </span> +
<span id="digit2"> </span> =
<input type="text" id="answer" size="2"; />
<br />
<p align="right"><input type="submit" name="cmdVerzenden" value="Verzenden">
<input type="reset" name="cmdWissen" value="Wissen"></td>
</form>
</tr>
</table>
</form>
</body>
Your validate function needs to return false on all errors to stop the form from submitting. You only seem to have it for one error.
function validate () {
var ta = document.getElementById("ta").value;
var answer = document.getElementById("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1+ digit2;
if (answer === null || answer === "") {
alert("reken de cijfers uit");
return false;
} else if (answer != sum){
alert("je som is fout");
return false;
} else if (ta === null || ta === ""){
alert("schrijf een bericht");
return false;
} else {
document.getElementById("answer").innerHTML = "bezig met sturen";
document.getElementById("answer").innerHTML = "";
}
}
I wonder if I can execute onlick function only after JS validation any ideas?
I have a form which has e-amil and phone mandatory filed and i would like to check them before form is submitted , even more if everything is ok another div onclick="$('#dialog-links-blocks').show()" should be display with a message Thank you! How can I make it to be shown only after validation !
<script type="text/javascript">// <![CDATA[
function validateForm()
{
var x=document.forms["myform"]["phone"].value;
var y=document.forms["myform"]["email"].value;
if (x==null || x=="")
{
alert("Укажите номер телефона!");
return false;
}
if (y==null || y=="")
{
alert("Укажите email!");
return false;
}
}
// ]]></script>
<iframe name="hiddenFrame" width="320" height="240"></iframe>
<form id="validation" action="http://listovki.md/send_form_email.php" method="POST" name="myform" enctype="multipart/form-data" onsubmit="return validateForm()" target="hiddenFrame">
<table><colgroup> <col width="122" /> <col width="260" /> </colgroup>
<tbody>
<tr>
<td><label>имя</label></td>
<td><input type="text" name="family" /></td>
</tr>
<tr>
<td><label>почта</label></td>
<td><input type="email" name="email" /></td>
</tr>
<tr>
<td><label>gsm</label></td>
<td><input class="gsm" type="tel" name="phone" /></td>
</tr>
<tr>
<td colspan="2"><input class="aplicaAcumBt" onclick="$('#dialog-links-blocks').show()" type="submit" name="submit" value="отправить" /></td>
</tr>
</tbody>
</table>
</form>
Why not show div only if validation is true? why show only on click
<script type="text/javascript">// <![CDATA[
function validateForm()
{
var x=document.forms["myform"]["phone"].value;
var y=document.forms["myform"]["email"].value;
if (x==null || x=="")
{
alert("Укажите номер телефона!");
return false;
}
if (y==null || y=="")
{
alert("Укажите email!");
return false;
}
// Validation is true here
$('#dialog-links-blocks').show()
}
</script>
HTML
<form name="f1" action="feedback1.php" method="Post" onSubmit="return isDataFilled();" >
<table border="0" align="center" width="500px" style="max-width: 500px;" cellspacing="3" cellpadding="5" align="center">
<tr align="left">
<td width="25%">
Enter your subject </td>
<td width="75%"><input type="text" name="subject" size="30" value="Your subject" onClick="if(this.value=='Your subject'){this.value=''}; this.style.backgroundColor='#CCFF99'" onBlur="if(this.value==''){this.value='Your subject'}; this.style.backgroundColor='white'"/></td>
</tr>
<tr align="left">
<td>
Enter your email<span style="color:#FF0000">*</span> </td>
<td>
<input type="text" name="email" size="30" value="example#mail.com" onClick="if(this.value=='example#mail.com'){this.value=''}; this.style.backgroundColor='#CCFF99'" onBlur="if(this.value==''){this.value='example#mail.com'}; this.style.backgroundColor='white'"/> </td>
</tr>
<tr align="left">
<td colspan="2">
Enter your message here<span style="color:#FF0000">*</span>: </td>
</tr>
<tr align="left">
<td colspan="2">
<textarea rows="10" cols="50" name="message" title="Your message goes here" onClick= "if(this.value=='Your message goes here'){this.value=''}; this.style.backgroundColor='#CCFF99'" onBlur="if(this.value==''){this.value='Your message goes here'}; this.style.backgroundColor='white'" >Your message goes here</textarea> </td>
</tr>
<tr>
<td colspan="" align="right">
<input type="submit" value="Send" name="b1" title="Send your message"/>
</td>
<td align="center">
<input type="reset" value="Reset" name="reset" title="Removes your form data and fill it again"/> </td>
</tr>
</table>
</form
JavaScript
function isDataFilled()
{
if(document.forms['f1']['email'].value=='example#mail.com')
{
alert("No email address in email field!");
return false;
}
if(document.forms['f1']['message'].value=='Your message goes here')
{
alert("No message in message field!");
return false;
}
return isEmailCorrect(document.forms["f1"]["email"].value);
return check_word_length(document.forms['f1']['message'].value, 20);
}
function isEmailCorrect(f_email)
{
var x=f_email;
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;
}
}
function check_word_length(text, over_size)
{
var word=0;
var message=text;
for(i=0;i<message.length;i++)
{
if(message.charAt(i)==" ")
{
word=0;
}
else
{
word++;
if(word>=over_size)
{
alert("Too long text entered");
return false;
}
}
}
}
The function check_word_length(text, over_size) is not working. I'm confused because I think my code is alright.
At the end of your isDataFilled:
return isEmailCorrect(document.forms["f1"]["email"].value);
return check_word_length(document.forms['f1']['message'].value, 20);
The return keyword immediately exits the current function; so the second return in that code will never be reached.
When you return a value in a function, it ends that function. So what is after that will not be called. So in this part:
return isEmailCorrect(document.forms["f1"]["email"].value);
return check_word_length(document.forms['f1']['message'].value, 20);
... the function will stops after isEmailCorrect call.
Plus, stop copy/paste codes from web and start try your own codes to know what you're doing.
I believe the issue is being caused by the fact that isDataFilled returns whatever isEmailCorrect() returns. Execution in the function stops there, so it never calls the last function
The code is very simple. But this is the first thing off this kind that I am doing, and I simply do not understand what it is that I am doing wrong.
Also this is the raw code straight from OCR.
This is GCSE computing coursework. I don't have to fix it, but I don't know how I'm supposed to test the stuff I'm going to add without the base code working.
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm(document) {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById(‘name’).style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById(‘subject’).style.color = "red";
result = false;
}
if (msg == "") {
return result;
} {
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onclick= return "validateForm()"; />
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
Your code has couple of syntax errors. I have removed that.
here is the fiddle link
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onclick= " return validateForm();" /><!--js function inside quotes-->
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
<script>
//function had illegal parameter
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
// document.getElementById(‘name’).style.color = "red";--->Id should be in quotes
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
// document.getElementById(‘subject’).style.color = "red";--->Id should be in quotes
result = false;
}
if (msg == "") {
return result;
} {
alert(msg);
return result;
}
}
</script>
i am able to display an alert msg when my form fields are empty but i want to display a red colored msg in front of empty field just like in yahoo registration form i dont know how to do this can any one explain to understand it
function validate_form ( )
{
valid = true;
if ( document.form.login.value == "" )
{
valid = false;
document.getElementById("LoginError").visible=false;
}
else
{
document.getElementById("LoginError").visible=false;
}
if(document.form.password.value == "" )
{
valid = false;
document.getElementById("PasswordError").visible=false;
}
else
{
document.getElementById("PasswordError").visible=false;
}
return valid;
}
//-->
</script>
<form name="form" method="post" action="UserLogin" onSubmit="return validate_form();">
<table width="592" height="127" border="0">
<tr>
<td width="46" height="29"> </td>
<td colspan="3"><%! private Boolean bRecord = false;
private Boolean bLogin = false;
%>
<% if(request.getAttribute("signup") != null)
bRecord =(Boolean)request.getAttribute("signup");
else
bRecord = false;
if(request.getAttribute("invalidlogin") != null)
bLogin =(Boolean)request.getAttribute("invalidlogin");
else
bLogin = false;
if(bRecord == true )
{%>
<font color="#336600"><b>You are Successfully Signed Up</b></font>
<%
request.removeAttribute("signup");
}//end if
if(bLogin == true )
{%>
<font color="#FF0000"><b>Invalid Login or Password</b></font>
<%
request.removeAttribute("invalidlogin");
}//end if
%></td>
</tr>
<tr>
<td> </td>
<td width="135"><div class="style1">LOGIN: </div></td>
<td width="146"><input type="text" name="login"></td>
<td width="247">*<span id="LoginError" visible="false" style="color: Red;">Enter login</span>
</td>
</tr>
<tr>
<td> </td>
<td><div class="style1">PASSWORD: </div></td>
<td><input name="password" type="password" id="password"></td>
<td>*<span id="PasswordError" visible="false" style="color: Red;">enter Password</span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right"><input name="Submit" type="image" class="bgtop" value="SIGN IN" src="images/btn_s.JPG" border="0" >
</td>
<td> </td>
</tr>
</table>
</form>
regards
You can simply add a non-visible span in front of the field
<span id="spanUsernameRequired" style="visibility: hidden; color: Red;">
This information is required</span>
<input id="username" type="text" />
Submit
, and then make it visible when the field is empty
function validate_form()
{
if (document.getElementById("username").value == "")
{
document.getElementById("spanUsernameRequired").style.visibility = 'visible';
return false;
}
else
document.getElementById("spanUsernameRequired").style.visibility = 'hidden';
return true;
}