Develop Reference

Can submit contact form without google recaptcha v2 validation

I have used a contact form in php and added google recaptcha on it. But I can submit the form without recaptcha validation. How can I make this recaptcha as required. I have already tried some solutions, but none of them worked for me. I appreciate your answers, Thanks
<form name="contact" method="post" action="" id="fsrep-contact-form">
<table cellspacing="0" cellpadding="1" border="0">
<tr id="fname">
<td>First Name <span>*</span></td>
<td><input type="text" name="fname" required></td>
</tr>
<tr id="lname">
<td>Last Name</td>
<td><input type="text" name="lname"></td>
</tr>
<tr id="emailid">
<td>Email <span>*</span></td>
<td><input type="email" name="email" id="mail" required></td>
</tr>
<tr id="phone-no">
<td>Cell Phone <span>*</span></td>
<td><input type="number" name="phone" required></td>
</tr>
<tr>
<td>Please give us any other details you would like, that would help us to help you find your next home</td>
<td><textarea name="message"></textarea></td>
</tr>
<tr>
<td>
<div class="g-recaptcha" id="rcaptcha" name="googlecaptcha" required data-sitekey="6LffZpsUAAAAAEC_KyN4KauhSSmKdRf9SVR5aVJD" data-callback="correctCaptcha"></div>
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="SUBMIT INQUIRY" id="submit"></td>
</tr>
</table>
</form>

I have tried this one and it works for me:
You have a "data-callback" attribute
<div class="g-recaptcha" id="rcaptcha" name="googlecaptcha" required data-sitekey="YOUR KEY" **data-callback="correctCaptcha"**></div>
simply create a function with the name correctCaptcha
var recaptchachecked=false;
function correctCaptcha() {
recaptchachecked = true;
}
Then with your form you hold it til you validate if the recaptchachecked variable is true, then proceed.
<form method="post" onsubmit="return isreCaptchaChecked(event)">
..
..
</form>
function isreCaptchaChecked()
{
e.preventDefault();
return recaptchachecked;
}
I hope this helps you.

JavaScript: Form not validated with OnSubmit

I am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...

You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.

You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />

change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">

Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine

How to add date validation?

This is my form that I use to post data. All of it works just fine in terms of inputting. This is just for reference to my javascript validation form.
<form action= "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" name="input" id="input">
<br>
<table>
<tr>
<th>Animal Name</th>
<td><input type="text" name="ANM_NAME" id="ANM_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Owner Name</th>
<td><input type="text" name="OWN_NAME" id="OWN_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Sign in</th>
<td><input type="date" name="SIGN_IN" id="SIGN_IN"></td>
</tr>
<tr>
<th>Medication</th>
<td><input type="text" name="MEDS" id="MEDS" maxlength="20"></td>
</tr>
<tr>
<th>Special Requirements</th>
<td><input type="text" name="SPEC" id="SPEC" maxlength="20"></td>
</tr>
<tr>
<th>Food</th>
<td><input type="text" name="FOOD" id="FOOD" maxlength="20"></td>
</tr>
<tr>
<th>Notes</th>
<td><input type="text" name="NOTE" id="NOTE" maxlength="20"></td>
</tr>
</table>
<br>
<input type="button" id="button" value="Submit">
</form>
Currently I have this for validation, on the button click it sets the var flag to true and then checks input type text to see if they have text, if they do it submits, if not it creates pop-up alert.
<!-- Checking if inputs are entered-->
<script>
$("#button").click(function(){
var flag=true;
// check all input values
$("input[type='text']").each(function(){
if( $(this).val()=="" ){
flag=false;
}
});
// submit the form
if(flag){
$("form#input").submit()
}else{
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
But it does not work for the date as it is using a different input type. How would I add the date input to this validation?

You can select more then one type of input using a delimiter:
<script>
$("#button").click(function() {
var flag = true;
// check all input values
$("input[type='text'],input[type='date']").each(function() {
if ($(this).val() == "") {
flag = false;
}
});
// submit the form
if (flag) {
$("form#input").submit()
} else {
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>

Trouble submitting my form (with jQuery validation) to the same page with $_POST

I have a form that uses a jQuery system to verify the input. With the default way it works, if there are no errors, it will submit. I am pretty bad with JavaScript, so my question is:
How would I go about making this submit to the same page and put the inputs in the $_POST variable, so it can execute the PHP code to handle the data, while having the jQuery validation working?
What I've noticed:
The type for the submit button must be set to type="button" for the validator to work
Having the type set to button, makes the <form> not submittable
PHP Snippet to validate the input (see if it actually posted into the $_POST variable):
if(isset($_POST)){
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
echo $username."<br>".$email."<br>".$password;
}
The script for the form:
<form action="" method="post">
<table border=0 id="form" style="padding:10px;">
<tr>
<td>
Username
</td>
<td align=left>
<input name="username" type="text" size="20" jVal="{valid:function (val) { if (val.length < 3) return 'Invalid Name'; else return ''; }}">
</td>
</tr>
<tr>
<td>
Email address
</td>
<td align=left>
<input name="email" type="text" size="40" jVal="{valid:/^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:'Invalid Email Address'}" jValKey="{valid:/[a-zA-Z0-9._%+-#]/, cFunc:'alert', cArgs:['Email Address: '+$(this).val()]}">
</td>
</tr>
<tr>
<td>
Password
</td>
<td align=left>
<input name="password" id="password" type="password" jVal="{valid:function (val) { if (val.length < 4) return false; else return true; }, message:'Password of 4 or more characters required'}">
</td>
</tr>
<tr>
<td style="padding-right:20px;">
Verify password
</td>
<td align=left>
<input name="passwordconfirm" id="passwordVerify" type="password" jVal="{valid:function (val) { if ( val != eval('$(\'#password\').val()') ) return false; else return true; }, message:'Password and Verify Password Must Match'}">
</td>
</tr>
<tr>
<td>
<input type="hidden" name="antispam" value="banana" />
<script>
var antiSpam = function() {
if (document.getElementById("antiSpam")) {
a = document.getElementById("antiSpam");
if (isNaN(a.value) == true) {
a.value = 0;
} else {
a.value = parseInt(a.value) + 1;
}
}
setTimeout("antiSpam()", 1000);
}
antiSpam();
</script>
</td>
</tr>
<tr>
<td></td>
<td>
<input id="submitButton" type="button" value="Click here to register!" onClick="if ( $('#form').jVal({style:'blank',padding:8,border:0,wrap:false}) ){ this.form.submit;}">
</td>
</tr>
</table>
</form>
If needed, the files corresponding to the jVal system (validation) can be found here, but they are most likely not needed.
Thanks ahead
PS. Please do not go saying to "narrow down the problem", when I had it narrowed down and posted the specific code snippets, I was told to post the entire code, so here it is.

Use HTML5 validation and <input> types. Your browser can validate e-mail addresses better than you can, for example.
Drop the spam protection; it will prevent actual users from using your page. Use reCAPTCHA.
Don’t use tables for layout. Please? At the very least, use CSS instead of the align attribute.
Don’t assume that everyone’s name is at least three characters long.
<form method="POST">
<table border="0" id="form" style="padding: 10px;">
<tr>
<td>
Username
</td>
<td align="left">
<input name="username" type="text" size="20" required />
</td>
</tr>
<tr>
<td>
Email address
</td>
<td align="left">
<input name="email" type="email" size="40" required />
</td>
</tr>
<tr>
<td>
Password
</td>
<td align="left">
<input name="password" id="password" type="password" required />
</td>
</tr>
<tr>
<td style="padding-right:20px;">
Verify password
</td>
<td align="left">
<input name="passwordconfirm" id="password-confirm" type="password" required />
</td>
</tr>
<tr>
<td></td>
<td>
<button>Click here to register!</button>
</td>
</tr>
</table>
</form>

How would I go about making this submit to the same page and put the
inputs in the $_POST variable, so it can execute the PHP code to
handle the data, while having the jQuery validation working?
You can post to the same page using PHP_SELF. Move the id from your table and add it to your form and use it to submit your form in the javascript code
<form id='form' action="<?php print $_SERVER['PHP_SELF'] ?>" method="post">
$('#form').submit() //instead of this.form.submit();
Also, instead of isset($_POST) you should use
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}

issues in html when calling 2 javascript functions at a time

I have an HTML file related to a javascript file.
In this javascript file, I have 3 functions which 2 of them will be called onload of the body.
These 2 functions are meant to type a string, each of them in a different textarea.
But, when Testing this, the two strings that are typed by these js functions, are unreadable
To clarify my issue: the string must be like this:
verification step 3 of 4 passed…
enter serial number
when I call the 2 functions onload of the body, it gives me this:
vrfcto f4pse..
ne eilnme..
I can't find the issue in my code.
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<title>Webmaster's Top Secret Directory</title>
<link rel="stylesheet" href="index.css">
<script src="redirector5.js"></script>
</head>
<body background="camouflage.jpg" onload='write()'>
<div align="center">
<img src="header.png" alt="Warning"/>
</div><br><br><br><br><br><br>
<div id="container">
<form name="form1" onsubmit="return myFunction();">
<div><table align="center" class="table">
<tr><td>
<input type="text" class="inputtext2" name="text" value="open sesame" disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="identify yourself...." disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="omar saab" disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="verification step 1 of 4 passed.... enter secret phrase...." disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="i own you terminal. release security now and let me in" disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="verifying.... verification step 2 of 4 passed.... enter your purpose of entrance...." disabled /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" value="manage personal files" disabled /></td>
</tr>
<tr>
<td><textarea class="inputtext2222" id='screen' disabled></textarea></td>
</tr>
<tr>
<td><textarea class="inputtext2222" id='screen2' disabled></textarea></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" id="myTextarea" autofocus spellcheck="false" /></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
<tr>
<td><input type="text" class="inputtext2" disabled/></td>
</tr>
</table>
</div>
<input
type="submit"
name="submit">
</form>
</div>
</body>
</html>
JAVASCRIPT CODE
function myFunction() {
var x = document.getElementById("myTextarea").value;
if (x === "tango-whisky-70433863") {
document.location.href = "index6.html";
return false;
}
else {
alert('Command not found.\nYou are not supposed to be here.\nGet out now !');
return false;
}
}
function write(){
type();
type2();
}
var index = 0;
var text = 'verification 3 of 4 passed...';
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',80);
}
var index = 0;
var text2 = 'enter serial number....';
function type2()
{
document.getElementById('screen2').innerHTML += text2.charAt(index);
index += 1;
var t = setTimeout('type2()',80);
}
NOTE When I call one of these 2 functions apart, it works.

I could be wrong, but I think that the issue is with index. You have the same variable name for each type, and when they run at the same time, it confuses the script. You have a variable named index, that will +=1, so when the next function gets it, it is messed up.
Try changing the variable for index on type2() to index2. See if this fixes it.

You have tried to declare the variable index twice. Try renaming it in the second function and it should work fine.
Explanation:
you declare var index = 0; twice within the same scope. in this case the second declaration is what gets used(fiddle example), and so there is only index variable inside the functions. That's why each function displays every second letter.