Check box and text field validation javascript - javascript

I have a text field and a checkbox on a mobile website that needs to be required before submitting the form. One is a zip code search that needs to be required to go on, and also a check box for a terms and conditions.
Right now i have the textfield validation working...
<script>
function validateForm() {
var x=document.forms["searchform"]["fromAddress"].value;
if (x==null || x=="") {
alert("Oops! You forgot to enter a location.");
return false;
}
}
</script>
but i cant figure out how to add in the checkbox...
below is the code for the form:
<form name="searchform" method="post" action="list.php" onsubmit="return validateForm()">
<input type="hidden" name="search" value="1" />
<input class="txtfield" type="search" id="search" name="fromAddress" onfocus="this.value=''" />
<div class="terms-container">
<div class="terms-checkbox-container">
<input class="acceptterms" type="checkbox" name="agree" value="agree_terms">
</div>
<div class="terms-text-container">
I Agree to the Terms and Conditions
</div>
</div>
<input class="btn-submit" type="submit" id="submit" value="Go!"/>
</form>
any help would be great. Thanks!

I believe you can check the checkbox's checked property:
var checked = document.forms["searchform"]["agree"].checked;
if (!checked) {
alert("Oops! Please check the checkbox!");
return false;
}

You can get the state of the checkbox using checked attribute. So, you can do something like this.
<script>
function validateForm() {
var x=document.forms["searchform"]["fromAddress"].value;
var y=document.forms["searchform"]["agree"].checked;
if (x==null || x=="") {
alert("Oops! You forgot to enter a location.");
return false;
}
if (y === false) {
alert("Oops! You forgot to agree to the terms and Conditions");
return false;
}
}
</script>

Use below code:
var agreeCheckbox = document.forms["searchform"]["agree"];
if(!agreeCheckbox.checked) {
alert('You need to accept terms to submit');
return false;
}
return true;

You can use that
function validateForm()
{
var x=document.forms["searchform"]["fromAddress"].value;
if (x==null || x=="")
{
alert("Oops! You forgot to enter a location.");
return false;
}
var checkbox = document.forms['searchform']['agree'];
if (!checkbox.checked) {
alert('Oops! You must agree with Terms');
return false;
}
return true;
}
http://jsfiddle.net/KkYmX/5/

you can use this answer for form validation in the checkbox
//checkbox
var m=document.getElementById("client");
console.log(m)
if(!m.checked){
document.getElementById("bekar").innerHTML="please agree term & condition ";
document.getElementById("bekar").style="color:red";
return false;
}
else{
document.getElementById("bekar").innerHTML="";
}
<input type="checkbox" class="form-check-input" id="isclient" required>
<label class="form-check-label" for="isclient"> I want you to work on a project with me</label><br><span id="bekar"></span>

Related

HTML Form Number Type Unique User Input

I am using the code below to ask users to rank (prioritize) which sweets they like the best. The users need to rank from 1-3 (1 being the best)
<form id="form1" name="form1" method="post" action="">
<input type="number" name="cake" id="cake" required="required" max="3" min="1"/>Cake <br />
<input type="number" name="twizlers" id="twizlers"required="required" max="3" min="1"/>Twizlers <br />
<input type="number" name="taffy" id="taffy" required="required" max="3" min="1"/>Taffy <br /><br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
I am using HTML 5 coding to make sure that they only use numbers 1,2, and 3 but how can I make sure they do not use the same number twice? Is there an HTML input code that I can use or is there some javascript code needed? If javascript is needed, what do you suggest?
<script type="text/javascript">
function item() {
cake = Number(document.getElementById('cake').value);
twizlers = Number(document.getElementById('twizlers').value);
taffy = Number(document.getElementById('taffy').value);
if (cake == twizlers) {
alert("Some alert cake or twizlers");
return false;
} else if (twizlers == taffy) {
alert("Some alert taffy or twizlers");
return false;
} else if (taffy == cake) {
alert("Some alert taffy or cake");
return false;
} else {
return true;
}
}
</script>
This will work, otherwise you can use radio button.
You can go with a JS check that the user only rank 1 item with a single value and cant rank that item again. You can use JS to do this.Insert an ID for your input field and then
document.getElementById("your_id").disabled = false;
document.getElementById("your_id").disabled = false;
document.getElementById("your_id").disabled = false;
var var1 = document.getElementById("your_id");
var1.onchange = function () {
if (this.disabled == true) {
document.getElementById("your_id").disabled = true;
}
}
Thus check this for three items.

Javascript won't stop php form submission

Javascript gives error window, but it won't stop the form submission. I'm stumped at this point and can't find an exact answer. Here is the code, thanks:
function newNameValidate() {
var x = document.forms["checkIn"]["newName"].value;
if (x==null || x=="") {
alert("Tech name must be filled out");
return false;
}
return true;
}
Here is the HTML:
<form name="checkIn" onsubmit="newNameValidate(checkIn)" action="check_in_complete.php" method="POST">
<input type ="submit" class="input" value="CHECK IN">
You must return the value of the function, onclick="return foo();"
As others have said, you need to return the value returned from the function, but a better option is to use unobtrusive JavaScript:
<form name="checkIn" action="check_in_complete.php" method="POST">
Script:
window.onload = function() {
document.forms["checkIn"].onsubmit = newNameValidate;
}
It can be done like:
<form name="checkIn" id="checkIn" action="check_in_complete.php" method="POST">
<input type ="button" class="input" value="CHECK IN" onclick="newNameValidate()">
</form>
<script>
function newNameValidate() {
var x = document.forms["checkIn"]["newName"].value;
if (x==null || x=="") {
alert("Tech name must be filled out");
return false;
}else{
checkIn.submit();
}
}
</script>

How to submit a form when a checkbox is checked?

I want to submit a form only when a check box is checked, or display "Please check the check box", is there any way to do that? Can any one guide me ?
thanks
<form name="myForm" action="mailsent.php" method="post">
<input type="checkbox" class="chk_row" name="chk1[]"" value=" '.$rows["id"].'"/>
<input type="submit" value="" style="margin:7px 26px -27px 1424px;background-image: url(/image/exporttt.png);background-repeat: no-repeat;cursor:pointer;" >
</form>
Edited code:
<form name="myForm" action="mailsent.php" method="post">
<input type="checkbox" class="chk_row" id="chk1" name="chk1[]"" value=" '.$rows["id"].'"/>
<input type="submit" value="" style="margin:7px 26px -27px 1424px;background-image: url(/image/exporttt.png);background-repeat: no-repeat;cursor:pointer;" >
</form>
<script>
$('form').submit(function(){
if(!$('#chk1').is(':checked')){
alert("Please Check ");
return false;
}
});
</script>
Using JQuery
You should give your checkbox unique ID
$('form').submit(function(){
var flag=0;
$('.chk_row').each(function(){
if(($(this).is(':checked'))){
flag=1
return false;
}
});
if(flag==0){
alert("Please Check Checkbox");
return false
}
});
Your your_checkboxId is what you give id in your input chekcbox
eg.
<input type="checkbox" id="your_checkboxId" name="chk_name" value="some" / >
You can validate using jquery, give your submit button with id 'submit', and then use this code
$('#submit').click(function(e){
e.preventDefault();
if( $("[name='chk1[]']").is( ':checked')){
return true;
} else {
// your custom code here
return false;
}
})
try this
$("#submit").click(function(e)
{
if($("#check").is(':checked'))
{
$("#form").prop("action","mailsent.php");
}else
{
e.preventDefault();
}
});
And you need not specify the action in form tag. #form is id of form, #check is id of checkbox.
assuming there is only one checkbox here, and I am selecting it using the class name. You may modify the selector as per the implementation to pick the desired one.
$(document).ready(function(){
$('.chk_row').change(function(e){
if($(this).attr('checked') === 'checked')
{
$('form[name="myForm"]').submit();
}
});
});

My javascript form validation works perfectly in Chrome but not in Firefox

The javascript:
function validateForm()
{
var x=document.forms["newsletter"]["agree"].value;
if (newsletter.agree.checked != 1)
{
alert("Checkbox must be checked");
return false;
}
var y=document.forms["newsletter"]["email"].value;
var atpos=y.indexOf("#");
var dotpos=y.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
{
alert("Not a valid e-mail address");
return false;
}
else
{
return true;
}
}
And my HTML
<div id="signup">
<form id="newsletter" action="" method="get" onsubmit="return validateForm()">
<fieldset>
<p>Email: <input type="text" name="email" size="35"/>
Please send me the monthly newsletter
<input type="checkbox" checked="checked" name="agree" value=""/>
<br/>
<input type="submit" value="Signup"/></p>
</fieldset>
</form>
</div><!-- signup -->
When I click submit with invalid entries in Chrome, the alert messages show and the form doesn't submit. However, when I do the same in Firefox, the form submits without an alert message.
I've been working on this for 5 hours, I truly have no idea. Thanks for any help, it's greatly appreciated.
I think it might help you.
<div id="signup">
<form id="newsletter" action="" method="get" onsubmit="return validateForm()">
<fieldset>
<p>Email: <input type="text" name="email" id="email" size="35"/>
Please send me the monthly newsletter
<input type="checkbox" checked="checked" name="agree" id="agree" value=""/>
<br/>
<input type="submit" value="Signup"/></p>
</fieldset>
</form>
</div><!-- signup -->
function validateForm()
{
var agreeEl = document.getElementById("agree");
if (agreeEl.checked != 1)
{
alert("Checkbox must be checked");
return false;
}
var emailEl = document.getElementById("email");
var atpos = emailEl.value.indexOf("#");
var dotpos = emailEl.value.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= y.length) {
alert("Not a valid e-mail address");
return false;
}
return true;
}
First, is there some reason you are using 'get' instead of 'post' to submit your form? Chrome complains to me when I tried to submit your form using 'get'.
I setup a simple fiddle to test your form at http://jsfiddle.net/jsWyw/. Everything works fine if I use JQuery to handle the form submit instead of your 'onSubmit'. So I looked into what was going on with onSubmit and came across this thread: http://productforums.google.com/forum/#!topic/chrome/Z3MD5Od3oQM.
Things to try:
Make sure to use post instead of get
Use 'onSubmit' instead of 'onsubmit'
Make sure your script is included using <script type="text/javascript" src="javascript.js"></script>
If that fails, I would suggest handling the submit event yourself in Javascript instead of using onSubmit which seems to be a bit flaky in Chrome.
Did you look at your error console? Your validateForm handler is assuming that window.newsletter is a form element (instead of using document.forms["newsletter"] in that first if()), which it's not in Firefox in standards mode. So that line throws, and if an onsubmit handler throws the form will just go ahead and submit. But of course the error console is reporting that the handler threw.....
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;
}
}
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

Javascript form validation not working

I can't understand why my javascript isn't working... Do i need to declare a variable somewhere?
<script type="text/javascript">
function validation(form) {
      
if(form.first_name.value == '' ) {

alert('Please enter your first name');
 form.first_name.focus();
return false;
}
if(form.00N30000006S4uq.value == '') {

alert('Please enter the high end of your budget');
 form.company.focus();
return false;
}
return true;
}
</script>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead" method="POST" onsubmit="return validation(this);">
As mentioned by #ReturnTrue, the NAME must begin with a letter. That is why your script is failing.
In your case since the field is auto-generated, if you know the flow of the elements in the form then you can reference the form elements array, like this...
form.elements[2].value
where form.elements[2] is form.00N30000006S4uq. That will do the job.
Example:
function validation(form) {
if(form.elements[0].value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.elements[2].value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
<form action="" method="POST" onSubmit="return validation(this);">
<input type="text" name="first_name" />
<input type="text" name="company" />
<input type="text" name="00N30000006S4uq" />
<input type="submit" name="submit" />
</form>
Form names need to begin with a letter. "00N30000006S4uq" fails because it begins with a number.
See: http://www.w3.org/TR/html401/types.html#type-cdata

Categories

Resources