i want to validate my form.I have a form validation javascript code in my code igniter view but it is not working and still sending values to next page without any validation.Could you tell me where I am making mistake and why this is happening?
Code:
<form method="get" action="/calculator/stage_two" name="calculate" id="calculate" onsubmit="return validateForm();">
<div class="calc_instruction">
<input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
<input type="text" name="postcode" placeholder="Postcode" id = "postcode" class="stage_one_box" />
</div>
<input type = "image" name = "submit_calculator" id = "submit_calculator" value="Go" src = "/images/next_button.png" />
</form>
Javascript function:
<script type="text/javascript">
function validateForm() {
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="") {
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
</script>
You are missing an end bracket. Any error in the validation code will return a non-false value and allow the submission
Here is a canonical way using forms access:
<form method="get" action="/calculator/stage_two" name="calculate"
id="calculate" onsubmit="return validateForm(this);">
<div class="calc_instruction">
<input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
<input type="text" name="postcode" placeholder="Postcode"
id = "postcode" class="stage_one_box" />
</div>
<input type = "image" name = "submit_calculator" id="submit_calculator" src="/images/next_button.png" />
</form>
<script type="text/javascript">
function validateForm(theForm) {
var postcode=theForm.postcode;
if (postcode.value=="") { // cannot be null or undefined if value="" on field
alert("Please enter the postcode to give you more accurate results");
postcode.focus();
return false;
}
return true; // allow submit
}
</script>
It seems like you are missing the closing braces "}" at the end of the function.
<script type="text/javascript">
function validateForm() {
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
} // <-- here
</script>
Please Add end braces for function
<script type="text/javascript">
function validateForm()
{
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
}
</script>
in your javascript function closing brace is missing
Please use this
in your javascript closing brace is missing
<script type="text/javascript">
function validateForm()
{
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
}
</script>
Try simply this line
var postcode=document.getElementById("postcode").value;
instead of
var postcode=document.forms["calculate"]["postcode"].value;
and
postcode==undefined
instead of
postcode==null
and for function validateForm() { you are missing the closing }
Try insert debugger here and try go throw method
<script type="text/javascript">
function validateForm() {
debugger;
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
In the code you posted, you are missing a closing brace for your validateForm() function, so assuming that's your actual code, what's happening is that you get a JavaScript error on submit, which causes the browser to just post the form.
Related
Is it compulsory to make templates of my form and then apply it in my page
or can I simply make form action to go and validate data from another php file in wordpress directory?... although it does function completely without any errors... but a friend told me that wordpress requires templates for forms and any php???
<form action="mypageform.php" method="post" name="myForm" onSubmit="validateForm()">
Name
<input name="fullname" type="text" value="" />
Age
<input name="age" type="text" value="" />
Email-ID
<input name="email" type="text" value="" />
<input name="submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">// <![CDATA[
function validateForm()
{
var x=document.forms["myForm"]["fullname"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["myForm"]["age"].value;
if (x==null || x=="")
{
alert("Age must be filled out");
return false;
}
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;
}
}
// ]]></script>
To use code(HTML/javascript) within word press visual/text editor is not suggestable as it might strip code.Go through given URL,
http://codex.wordpress.org/Writing_Code_in_Your_Posts
https://codex.wordpress.org/Using_Javascript
It is better to create word press separate template where you can build your own form include validation javascript in seperate template's PHP file within wordpress directory.
my javascript code is below:
<script>
function check(){
if(document.getElementById("1").value=="") {
alert("enter 1st value");
document.getElementById("1").focus();
return;
}
else if(document.getElementById("2").value=="") {
alert("enter 2nd value");
document.getElementById("2").focus();
return;
}
return(true);
}
</script>
my html page is
<form action="home.php" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="check()"></input>
</form>
when I left intentionally on of the input fields empty, it is focusing but immediately redirecting to home.php page without proceeding further for input value.
You return void in the check function. If you return false submitting of the form halts.
<script>
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false; // <<<< CHECK THIS LINE;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false; // <<<< CHECK THIS LINE
}
return(true);
}
</script>
// Edit
An input element is a so-called self-closing tag. Correct syntax is:
<input type="text" name="some_name" value="" />
And a submit button should be defined as:
<button type="submit">Button text</button>
You need to return false in order for the submit to get cancelled.
<form action="home.php" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="return check()"></input> <!--Notice the return here-->
</form>
function check()
{
if(document.getElementById("1").value=="")
{
alert("enter 1st value");
document.getElementById("1").focus();
return false;//return false instead of void
}
else if(document.getElementById("2").value=="")
{
alert("enter 2nd value");
document.getElementById("2").focus();
return false;//return false instead of void
}
return true;
}
JSFiddle
<form action="home.php" method="get" onSubmit="return check();">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"></input>
</form>
You are not checking for third field whether it is empty or not.... Then how will this be stopped if it is empty?
It goes with out getting tested
Also usage return false is needed in order to prevent the page from going on, because it tells the browser to reset such actions.
And then use return check() instead
Change to
<html>
<script type="text/javascript">
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false;
}
else if(document.getElementById("3").value==""){
alert("enter 3nd value");
document.getElementById("3").focus();
return false;
}
return(true);
}
</script>
<form action="home.php" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="return check()"></input>
</form>
You need to change your question like below
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false;
}
return(true);
}
if your function return false then it will prevent the form to be posted.
so inside the if condition returning false.
<html>
<head>
<script>
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="test.html" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="return check()"></input>
</form>
</body>
</html>
I'm new with PHP and JavaScript. I eant to validate form, and if the form input fields are correct, then send it to php external script. I've tried something like this:
<head>
<script type="text/javascript">
function Validate(){
var x=document.forms["form"]["firstname"].value;
var y=document.forms["form"]["lastname"].value;
var z=document.forms["form"]["age"].value;
if(x==null || x=="") {
alert("Input name!");
} else if(y==null || y=="") {
alert("Input surname!");
} else if(z==null || z=="") {
alert("Input age!");
} else {
// IS IT POSSIBLE TO SEND FORM HERE FORM VARIABLES TO PHP SCRIPT?
}
}
</script>
</head>
<body>
<form name="forma" action="validate.php" method="post" onSubmit="return Validate()">
Firstname: <input type="text" name="firstname">
Lastname: <input type="text" name="lastname">
Age: <input type="text" name="age">
<input type="submit">
</form>
</body>
</html>
Since you are not returning false from your function, the form should be being submitted anyway. You can stop it from being submitted by having your validate() function return false.
Your code looks correct, other than the fact you probably want to return false on failure to prevent the form from submitting. When not returning false, the form will simply continue to submit.
I also think you probably meant to name your form form not forma
You should validate the input server-side (php), even if you did it client-side (javascript).
You do this by checking on $_POST in validate.php:
Quite at the beginning of your script:
if (isset($_POST)) { // form has been sent
if (!isset($_POST['firstname']) || strlen($_POST['firstname'])==0) { // no entry
$e['firstname']='please enter a firstname!'; // prepare error-msg
}
if (!isset($e)) { // no error, continue handling the data
// write data to database etc.
}
}
// in your form...
if (isset($e)) echo "there were errors: ". implode(',',$e);
You need to put this code:
function Validate(){
var x=document.forms["form"]["firstname"].value;
var y=document.forms["form"]["lastname"].value;
var z=document.forms["form"]["age"].value;
if(x==null || x=="") {
alert("Input name!");
return false;
} else if(y==null || y=="") {
alert("Input surname!");
return false;
} else if(z==null || z=="") {
alert("Input age!");
return false;
} else {
return true;
}
}
i want to submit a form using shift+enter button instead of pressing a simply Enter Button.
Pl help me out
If you still want to do this despite the usability problem that this poses...
$('#form').keydown(function(e) {
if( e.keyCode === 13 && e.shiftKey ) { // When "Shift + Enter"
$(this).trigger('submit');
} else { e.preventDefault(); }
});
I suggest use CTRL+ENTER to submit form。So that the user experience will be better。
<script language=javascript>
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}
}
</script>
<form action="http://www.TOMMYHU.CN" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>
Have you tried?
$(document).keydown(function(e) {
if(e.keyCode==13 && e.keyCode==16){ // 13=enter 16=shift
//submit here
alert('submit now');
}
else{
e.preventDefault();
}
});
Improving on zhaixiaohu's idea:
<form action="." method="POST">
<textarea name="text"></textarea><br />
<button>Submit</button>
</form>
<script>
var textareas = document.getElementsByTagName("TEXTAREA");
for (var i = 0; i < textareas.length; ++i) {
textareas[i].addEventListener('keydown', function(ev) {
if(ev.ctrlKey && ev.keyCode === 13){
this.form.submit();
}
});
}
</script>
This…
is pure Javascript
attachs itself to all textareas, and submits the correct form
works only in modern browsers, but might be extended to work with more browsers
I want to alert user if they haven't checked any checkbox, and return to the form
After they checked at least one checkbox, proceed into the next page
How can I do that ?
<input type="checkbox" name="pay[]" value="
<?php
echo $DateArr[$record_count].";";
echo $invoiceArr[$record_count].";";
echo $TotalArr[$record_count].";";
echo $amount_dueArr[$record_count];
?>
" onClick="checkTotal()"/>
<td ALIGN="right" ><input type="submit" name="submit" value="Continue" onMouseOver="CheckBoxStatus()"></td>
javascript :
function CheckBoxStatus()
{
var checkbox_status = document.getElementsByName("pay[]").value;
if (checkbox_status = ";;;")
{
alert("Please select at least one to proceed!");
return false;
}
else
{
alert("Continue!");
return true;
}
}
If user hasn't checked, at least one checkbox, alert the message and return to form
Then
<form name="payform" method="POST" action="payment.php" onSubmit=" CheckBoxStatus()">
How can I stay in the form if user is not checking any checkboxes ?
May be like this :
function CheckBoxStatus()
{
if (document.getElementsByName("pay[]").checked == true)
{
document.forms["payform"].submit();
return true;
}
else
{
alert("Please select at least one invoice to proceed!");
document.forms["payform"].reset();
return false;
}
}
can i do like this :
`
function CheckBoxStatus()
{
var status=$("pay[]").attr('checked');
if (status=true)
{
//if(document.getElementsByName("pay[]").checked) {
return true;
}
else {
alert("Please select at least one to proceed!");
return false;
}
}`
With jQuery
var $checked = $("input:checked");
if($checked.length == 0) {
alert("Please select at least one to proceed!");
}
That HTML is a bit of a mess. A couple of things...
Get rid of the <td> tag containing the button. It doesn't look like it has a purpose.
To call the JavaScript you need to use onsubmit not onMouseOver.
To check if the checkbox is checked change your function to the following.
function checkBoxStatus {
if(document.getElementsByName("pay[]").checked) {
return true;
}
else {
alert("Please select at least one to proceed!");
return false;
}
}
EDIT; forgot the alert
Check if you have included jquery. :|
Try this:
<input id="ipay" type="checkbox" name="pay[]" value="
<?php
echo $DateArr[$record_count].";";
echo $invoiceArr[$record_count].";";
echo $TotalArr[$record_count].";";
echo $amount_dueArr[$record_count];
?>"
/>
<td ALIGN="right" ><input type="submit" name="submit" value="Continue"></td>
<form id="pform" name="payform" method="POST" action="payment.php">
Javascript:
$(document).ready(function() {
$('#pform').submit(function(e) {
var paycheck = $('#ipay').attr('checked');
if(paycheck != true or paycheck != 'checked') {
alert('Please check at least one option.');
e.preventDefault();
}
});
});
You can do something like this:
<html>
<head>
<title>Verify Checkbox</title>
<script type="text/javascript">
function verifyCheckboxSelected(form) {
var theForm = document.forms[form];
var valid = false;
for( var i=0; i < theForm.length; i++ ) {
if(theForm.elements[i].checked) {
valid = true;
}
}
if (!valid) {
alert('You must select at least one checkbox')
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onSubmit="return verifyCheckboxSelected(this.name)">
<input type="checkbox" name="myCheckBoxes[]"/>Checkbox A</br>
<input type="checkbox" name="myCheckBoxes[]"/>Checkbox B</br>
<input type="checkbox" name="myCheckBoxes[]"/>Checkbox C</br>
<input type="submit" value="submit" />
</form>
</body>
</html>