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.

Insert more fields onclick using jquery

I'm working on a web application that gives user the chance to input more names as user wishes. the form has a link that has to perform an addition of textboxes on click of that link.
i know there is a way to use jquery to do that but currently don't know why cos i just moved to jquery from angularjs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>

$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#field').append('<td>Textbox'+id+'</td>');
$('#more').append('<td><input type="text" id='+id+' name="text'+id+'"></td>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
or try this one
$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#more td').append('<input type="text" id='+id+' name="text'+id+'">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
input{
margin-bottom: 10px;
}
</style>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>

First you have to identify better your elements. Let's put an id for table, an id for add more fields link and a class for tr model.
Then we have to copy all html you want to duplicate.
Then append it to table.
Remember that doing this, when you submit, all those duplicate parameters will become an array of values.
Let's refactor some bad code here too.
Since we are duplicating fields we need to remove Id attribute of them all.
I'm moving add link outside the table and removing those blank tds. Also write a good table with thead and tbody.
When we want to add field, we want to remove too. So let's create a link to remove.
function cloneTrModel() {
return $('.model').first().clone();
}
var trModel = cloneTrModel();
function setRemove() {
$(".remove" ).click(function() {
$(this).closest('tr').remove();
});
}
setRemove();
$( "#add" ).click(function() {
$("#contactTable tbody").append(trModel);
trModel = cloneTrModel();
setRemove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<strong style="float: right;">Add More Fields</strong>
<table id="contactTable" width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="model">
<td class="inner"><input type="text" name="name[]"></td>
<td><input type="text" name="address[]"></td>
<td><input type="text" name="age[]"></td>
<td><input type="text" name="phone_number[]"></td>
<td>Remove</td>
</tr>
</tbody>
</table>
</form>

Something like that
$( "#add" ).click(function() {
$( ".inner" ).append( "<input type='text' name='name' id='name'>" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td class="inner"><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>

Javascript Validating username Length

I am trying to validate my username field and check if the username contains atleast 6 letters, if not then i show a pop up window indicating the same.
But the alert command does not seem to work.
Following is the code:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
if (username1.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form>
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>

You are trying to use the name element attribute as the id, which creates a global window property. Name does not do that however, you can use.
You also aren't getting the value, you are trying to get the length on the element.
document.getElementsByName('username1')[0].value

Answer:
I tried it this way it worked:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
username2 =form1.username1.value
if (username2.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form name="form1">
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>

Form Validation all letters

Hi Please find the below form validation code. I've used html5 input attributes for most of the validation except where i need all letter for the first name and last name. The below cose is what i wrote for first name...but looks like it's not entering the if condition. Can anyone please help
and lemme know where I went wrong.....Thanks Guys!!
<!DOCTYPE html>
<html>
<head>
<script>
function formvalid(){
var uname=document.form1.usrname.value;
var letters=/^[a-zA-Z]+$/;
if (uname.value.match(letters)){
alert("Your details have been saved.Please submit the course fee at the cash counter before 13/12/2014 and collect your id card.The training will start on 23/12/2014 from 10.30am to 4.40 pm");
return true;
}else{
alert("Please Enter a valid Username");
uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form1">
<h1> Register Online</h1>
<Table>
<tr>
<td>First Name</td>
<td><input type="text" name="usrname" required></td>
</tr>
<tr>
<td> Last Name</td>
<td><input type="text" id="usrname1" required></td>
</tr>
<tr>
<td> Email ID</td>
<td><input type="email" id="mail" pattern="[^#]+#[a-zA-Z]+\.[a-zA-Z]{2,6}" required></td>
</tr>
<tr>
<td> Roll Number</td>
<td><input type="number" min="1" id="roll" required></td>
</tr>
<tr>
<td>Training Program</td>
<td><select id="sel">
<option value="movie">Select Training</option>
<option value="andro">Android</option>
<option value="java">Java</option>
<option value="C">Robotics</option>
<option value="hack">Ethical Hacking</option>
</select></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input type="number" min="1" id="number" required></td>
</tr>
<tr><td>
<Button type="submit" onclick="return formvalid()">Submit</BUTTON></td>
<td><BUTTON type="reset">Reset</BUTTON>
</td></tr>
</table>
</form>
</body>
</html>

Instruction error outside javascript function

I'm making a form with a submit button to check login and a link to make a new user!
I'm coding this with:
<script language="javascript">
function new_user()
{
document.getElementById("login").value='registo';
}
</script>
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
I want to use a hidden field to know if the user pressed the button or the link.
To make the code smaller I'd like to use this code instead:
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
Can anyone explain me why this doesn't work?

You might be having a quote clash in the definition of the onclick event handler. Your browser is interpreting it as onclick="document.getElementById(".
Try enclosing the argument of the document.getElementById sentence in single quotes.
onclick="document.getElementById('login').value='registo';document.frmLogin.submit();">

You can use it as below
<td>Novo Utilizador</td>
use single quote for getElementById that will solve it.