I want to make my Billing fields automatically match my Shipping fields. I can make it work with text values, but I can't automatically populate a RADIO BUTTON. I'm using this code: http://jsfiddle.net/aDNH7/ I would like to keep this in Javascript.
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
}
if(f.billingtoo.checked == false) {
f.billingname.value = '';
f.billingcity.value = '';
}
}
</script>
<td bgcolor="eeeeee">
<b>Mailing Address</b>
<br><br>
<form>
Name:
<input type="text" name="shippingname">
<br>
City:
<input type="text" name="shippingcity">
/>
Checking
/>
Savings
<br>
<input type="checkbox" onclick="FillBilling(this.form)" name="billingtoo">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<p>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname">
<br>
City:
<input type="text" name="billingcity">
/>
Checking
/>
Savings
BUT, I want to add this to the form for both the BILLING and SHIPPING. And then I want the SHIPPING one to match up with the BILLING one if I check the box.
<!-- <td colspan="2"><p>
<label>
<input type="radio" name="acct" value="checking" id="acct_0" <?php if ($user_info['acct'] == "checking"){ echo "checked='checked'"; }?>/>
Checking</label>
<br />
<label>
<input type="radio" name="acct" value="savings" id="acct_1" <?php if ($user_info['acct'] == "savings"){ echo "checked='checked'"; }?>/>
Savings</label>
<br />
</p>
</td>-->
Javascript:
document.getElementById("acct_0").setAttribute("checked", "checked");
Jsfiddle here
Related
I have created a JavaScript function that checks a form during submitting the input and displays an error message if there's no input.
It works perfectly when none input is given. It displays all the error messages correctly.
The Problem: But if I leave just the first field blank i.e, the fullname; the if loop stops there and doesn't display the second or third error messages i.e, the streetaddr & quantity.
NOTE: This error happens only when one of streetaddr or quantity is not given with addition to the first field i.e, fullname.
What should I do to display the error messages correctly. According to the blank input regardless the input field comes first or second or third.
Also, I prefer to do this with just Vanilla JavaScript, no frameworks/libraries. I'm trying to learn!
Link(s): This is a challenge from Wikiversity
/* Checking form function */
function checkForm(){
window.alert("You clicked Submit!");
var fullNameCheck = document.getElementById("fullname");
var addressCheck = document.getElementById("streetaddr");
var quantityCheck = document.getElementById("quantity");
var is_valid = false;
/* If statements to check if text box is empty */
if (fullNameCheck.value=="" && addressCheck.value=="" && quantityCheck.value=="") {
document.getElementById("nameerrormsg").style.display="inline";
document.getElementById("addrerrormsg").style.display="inline";
document.getElementById("qtyerrormsg").style.display="inline";
is_valid = false;
} else if(fullNameCheck.value==""){
document.getElementById("nameerrormsg").style.display="inline";
document.getElementById("addrerrormsg").style.display="none";
document.getElementById("qtyerrormsg").style.display="none";
is_valid = false;
} else if (addressCheck.value==""){
document.getElementById("addrerrormsg").style.display="inline";
document.getElementById("nameerrormsg").style.display="none";
document.getElementById("qtyerrormsg").style.display="none";
is_valid = false;
} else if (quantityCheck.value==""){
document.getElementById("qtyerrormsg").style.display="inline";
document.getElementById("nameerrormsg").style.display="none";
document.getElementById("addrerrormsg").style.display="none";
is_valid = false;
} else {
document.getElementById("nameerrormsg").style.display="none";
document.getElementById("addrerrormsg").style.display="none";
document.getElementById("qtyerrormsg").style.display="none";
is_valid = true;
} return is_valid;
}
.errormsg{
color: red;
background-color: yellow;
display: none;
}
<form action="mailto:me#fakeemail.com" onsubmit="return checkForm();">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity">
</label>
</p>
<p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>
</fieldset>
<input type="submit" value="Submit it!">
</form>
I'd prefer to just make the fields required, no Javascript needed:
<form action="mailto:me#fakeemail.com" onsubmit="return checkForm();">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname" required>
</label>
</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr" required>
</label>
</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity" required>
</label>
</p>
</fieldset>
<input type="submit" value="Submit it!">
</form>
Otherwise, you can first hide all the error messages. Iterate over all inputs in the form, and if invalid (missing), navigate to its ancestor p and then to the adjacent .errormsg and set its display.
It would also be a good idea to avoid inline handlers entirely, they have too many problems to be worth using. Attach listeners properly using addEventListener in Javascript instead.
document.querySelector('form').addEventListener('submit', () => {
for (const errormsg of document.querySelectorAll('.errormsg')) {
errormsg.style.display = 'none';
}
let valid = true;
for (const input of document.querySelectorAll('form input')) {
if (input.value) {
// valid
continue;
}
valid = false;
input.closest('p').nextElementSibling.style.display = 'inline';
}
return valid;
});
.errormsg{
color: red;
background-color: yellow;
display: none;
}
<form action="mailto:me#fakeemail.com">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity">
</label>
</p>
<p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>
</fieldset>
<input type="submit" value="Submit it!">
</form>
You could hide all the error text as initially. Then show the error text based on respected input failure
/* Checking form function */
function checkForm() {
window.alert("You clicked Submit!");
var fullNameCheck = document.getElementById("fullname");
var addressCheck = document.getElementById("streetaddr");
var quantityCheck = document.getElementById("quantity");
var is_valid = false;
/* If statements to check if text box is empty */
document.getElementById("nameerrormsg").style.display = "none";
document.getElementById("addrerrormsg").style.display = "none";
document.getElementById("qtyerrormsg").style.display = "none";
is_valid = true;
if (fullNameCheck.value == "") {
document.getElementById("nameerrormsg").style.display = "inline";
is_valid = false;
}
if (addressCheck.value == "") {
document.getElementById("addrerrormsg").style.display = "inline";
is_valid = false;
}
if (quantityCheck.value == "") {
document.getElementById("qtyerrormsg").style.display = "inline";
is_valid = false;
}
return is_valid;
}
.errormsg {
color: red;
background-color: yellow;
display: none;
}
<form action="mailto:me#fakeemail.com" onsubmit="return checkForm();">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity">
</label>
</p>
<p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>
</fieldset>
<input type="submit" value="Submit it!">
</form>
I want to use billingname[] and billingcity[] instead but I don't know how to write .value for these input. (Now I use ordinal number such as billingname1, billingname2 but I don't want ordinal number)
<script>
function FillBilling(f) {
if(f.billingtoo1.checked == true) {
f.billingname1.value = f.shippingname.value;
f.billingcity1.value = f.shippingcity.value;
}
if(f.billingtoo1.checked == false) {
f.billingname1.value = '';
f.billingcity1.value = '';
}
if(f.billingtoo2.checked == true) {
f.billingname2.value = f.shippingname.value;
f.billingcity2.value = f.shippingcity.value;
}
if(f.billingtoo2.checked == false) {
f.billingname2.value = '';
f.billingcity2.value = '';
}
}
</script>
<td bgcolor="eeeeee">
<b>Mailing Address</b>
<br><br>
<form id="add_field">
Name:
<input type="text" name="shippingname">
<br>
City:
<input type="text" name="shippingcity">
<br>
<input type="checkbox" onclick="FillBilling(this.form)" name="billingtoo1">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<p>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname1">
<br>
City:
<input type="text" name="billingcity1">
</p>
<input type="checkbox" onclick="FillBilling(this.form)" name="billingtoo2">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<p>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname2">
<br>
City:
<input type="text" name="billingcity2">
</p>
</form>
</td>
If you're not going to give each field a unique identificator (maybe a id property), you have to iterate over all of them in order to get the value for each one:
$('input[name="billingname[]"]').each(function() {
this.value = f.shippingname.value;
});
Not sure how the code actually works on your environment, but it should give you an idea.
I have this assignment in my class where we are to make a simple form with three required fields (out of five). I am having problems with getting my code to work.
This is via my professor...with what he wants
{
On submitting the form, the browser should check that :
Values for the required fields have been entered
Use regular expressions to check that the form of the entered input is proper for the email, telephone, and website fields. The forms to check for are:
Email: [alphanumeric string including . and _ ]# [alphanumeric string including . and _ ]. [alpha string]
Telephone: Either (ddd)ddd-dddd or ddd-ddd-dddd etc
Website: www.[alphanumeric string including . _ -].[com or net etc]
If any error is found, the form should not be submitted and appropriate error messages should be generated.
}
All validation must be "client side" i.e. on the browser using Javascript (not on any server and no Jquery or any programming other than Javascript and the required HTML). Use of any authoring tools is strictly and expressly forbidden.
This what I have now. Please help. Below is the code. What am I doing wrong?
<script language = "JavaScript">
<!--
function validateForm(){
//This is to check that required fields are filled
var x = document.contact.Name.value;
var y = document.contact.Email.value;
var z = document.contact.Website.value;
var p = document.contact.Phone.value;
if(x==null || x ==""){
alert('Name must be filled out');
return false;
}
if (y ==null || y == ""){
alert('Email must be filled out');
return false;
}
if (z == null || z == ""){
alert('Website must be filled out');
return false;
}
if(!isEmail()){
alert('This is not a correct Email format');
}
if (!isTelephone()){
var errorText = document.createTextNode(
"This is not a correct Phone number format");
}
if(!isWeb()){
errorText = document.createTextNode(
"This is not the correct Website format");
}
}
function isTelephone(){
//This checks that the phone number is in the required format
return document.contact.Phone.value.match(
/^\(\d\d\d-d\d\d\-\d\d\d\d$/);
}
function isEmail(){
//This is for checking email format
return document.contact.Email.value.match(
/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/);
}
function isWeb(){
return document.contact.Website.value.match(
/^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/);
}
-->
</script>
<body>
<form name="contact" action="" method="post" onSubmit = "return validateForm();">
Name: <input type="textbox" name="Name" value="" > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"
ONCLICK="
alert('This will clear the form.');
Name.value=' '
Company.value=' '
Email.value=' '
Telephone.value=' '
Website.value=' '"><br>
</form>
</body>
</html>
Try this out:- https://jsfiddle.net/vduwxjmv/
This can be done without JavaScript also using required attribute at each html control for which value is mandatory. And for clear you can use input type as reset.
HTML:-
<form name="contact" action="" method="post">
Name: <input type="textbox" name="Name" value="" required> <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value=""> <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" required> <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" required><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear" />
You can do a check by using the following JavaScript code
var result = $("#form")[0].checkValidity();
or you may change input button
<input type="submit" value="Submit Contact Details">
<!DOCTYPE html>
<html>
<body>
<form name="contact" method="post">
Name: <input type="text" class="form-control" name="Name" placeholder="Name" required="required" /> <font color = red>*Required </font><br>
Company: <input type="text" class="form-control" name="Company" placeholder="Company" /> <font color = red>Optional </font><br>
Email: <input type="email" class="form-control" name="Email" placeholder="Email" required="required" /> <font color = red>*Required </font><br>
Telephone: <input type="text" class="form-control" name="Telephone" placeholder="Telephone"/> <font color = red>Optional </font><br>
Website: <input type="text" class="form-control" name="Website" placeholder="Website" required="required" /><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"><br>
</form>
</body>
</html>
change the type from button to submit.
on giving the type as reset ,it will clear the contents.
on giving required="required", that field will be considered as a mandatory one.
<html>
<head>
<script language = "JavaScript">
function validateForm(thisVar){ alert('method Called From: ');alert(thisVar.value);alert(thisVar.name);
//This is to check that required fields are filled
var x = document.contact.Name.value;
var y = document.contact.Email.value;
var z = document.contact.Website.value;
var p = document.contact.Phone.value;
if(x==null || x ==""){
alert('Name must be filled out');
return false;
}
if (y ==null || y == ""){
alert('Email must be filled out');
return false;
}
if (z == null || z == ""){
alert('Website must be filled out');
return false;
}
if(!isEmail()){
alert('This is not a correct Email format');
}
if (!isTelephone()){
var errorText = document.createTextNode(
"This is not a correct Phone number format");
}
if(!isWeb()){
errorText = document.createTextNode(
"This is not the correct Website format");
}
}
function isTelephone(){
//This checks that the phone number is in the required format
return document.contact.Phone.value.match(
/^\(\d\d\d-d\d\d\-\d\d\d\d$/);
}
function isEmail(){
//This is for checking email format
return document.contact.Email.value.match(
/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/);
}
function isWeb(){
return document.contact.Website.value.match(
/^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/);
}
</script>
</head>
<body>
<form name="contactForm" action="" method="post" onSubmit = "return validateForm(this);">
Name: <input type="textbox" name="Name" value="" > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details" onclick="validateForm(this);">
<input type="reset" value="Clear"
ONCLICK="
alert('This will clear the form.');
Name.value=' '
Company.value=' '
Email.value=' '
Telephone.value=' '
Website.value=' '"><br>
</form>
</body>
</html>
You can validate it by two ways ---
use Submit type button
call validationForm on button click
Like --
<input type="submit" value="Submit Contact Details">
or
<input type="button" onclick="return validationForm();" value="Submit Contact Details">
you can check method call from to times 1st from onclick 2nd from onsubmit
Dont forget to appreciate (vote up).
For the gender radio button validation within the validate function below, the alert occurs whenever neither of the gender radio buttons are selected. However, whenever "ok" is selected within the browser, the form is submitted. What seems to be causing that problem? Also I would like for it to be focused like the rest when returned false, if that is possible.
JavaScript
function validate()
{
var gender = document.getElementsByName("gender");
if( document.myForm.firstname.value == "" )
{
alert( "Please provide your first name!" );
document.myForm.firstname.focus() ;
return false;
}
if( document.myForm.lastname.value == "" )
{
alert( "Please provide your last name!" );
document.myForm.lastname.focus() ;
return false;
}
if( document.myForm.email.value == "" )
{
alert( "Please provide your email!" );
document.myForm.email.focus() ;
return false;
}
if( (gender[0].checked == false) && (gender[1].checked == false))
{
alert( "Please provide your gender!" );
document.myForm.male.focus() ;
return false;
}
if( document.myForm.date.value == "" )
{
alert( "Please provide a date to be performed!" );
document.myForm.date.focus() ;
return false;
}
if( document.myForm.vname.value == "" )
{
alert( "Please provide a victim's name!" );
document.myForm.vname.focus() ;
return false;
}
if( document.myForm.vemail.value == "" )
{
alert( "Please provide the victim's email!" );
document.myForm.vemail.focus() ;
return false;
}
return( true );
}
HTML:
<div id="box">
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<h1> Truth </h1>
<label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
<label> Last Name: </label> <input type="text" name="lastname" id="lastname" maxlength="30" placeholder="Doe" /> <br><br>
<label> Email:</label> <input type="text" name="email" id="email" placeholder="user#mydomain.com" /> <br><br>
<label> Male </label><input type="radio" name="gender" id="gender" value="male"/>
<label> Female </label><input type="radio" name="gender" id="gender" value="female"/> <br><br>
<label> Date to be performed: </label><input type="date" name="date" id="date" /><br><br>
<h2> Victim </h2>
<label> Name: </label> <input type="text" name="vname" id="vname" maxlength="30" placeholder="Mary Jane" /><br><br>
<label> Email:</label> <input type="text" name="vemail" id="vemail" placeholder="user#mydomain.com" /> <br><br>
<h2> Please select a truth questions below </h2> <br>
<input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>
<input type="radio" name="truth" value="q2"> Have you ever return too much change? <br>
<input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>
<input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>
<input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>
<input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>
<input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>
<input type="submit" value="Submit"/> <br>
</form>
</div>
I've figured out the solution. Instead of having:
if( (gender[0].checked == false) && (gender[1].checked == false))
{
alert( "Please provide your gender!" );
document.myForm.male.focus() ;
return false;
}
It should be:
if( (gender[0].checked == false) && (gender[1].checked == false))
{
alert( "Please provide your gender!" );
document.myForm.male.focus() ;
return true;
}
I did this & the validation is working perfectly.
Just provide a default for gender.
<input type="radio" name="gender" id="gender" value="male" checked/>
This will avoid any possible confusion and requires less validation overall.
You are defining your validate() function but I don't see you actually calling it when you submit the document. A submit input on it's own does not know about your validation.
Maybe change:
<input type="submit" value="Submit"/>
to
<input type="button" value="Submit" onClick="if(validate==true) {document.forms[0].submit()}" />
I would select according to different IDs naming them male and female and and call the validate function as ElPedro suggests.
I think it was issue with the focus function.
I made few changes and it worked.
<div id="box">
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return validate();">
<h1> Truth </h1>
<label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
<label> Last Name: </label> <input type="text" name="lastname" id="lastname" maxlength="30" placeholder="Doe" /> <br><br>
<label> Email:</label> <input type="text" name="email" id="email" placeholder="user#mydomain.com" /> <br><br>
<label> Male </label><input type="radio" name="gender" id="gender" value="male"/>
<label> Female </label><input type="radio" name="gender" id="gender" value="female"/> <br><br>
<label> Date to be performed: </label><input type="date" name="date" id="date" /><br><br>
<h2> Victim </h2>
<label> Name: </label> <input type="text" name="vname" id="vname" maxlength="30" placeholder="Mary Jane" /><br><br>
<label> Email:</label> <input type="text" name="vemail" id="vemail" placeholder="user#mydomain.com" /> <br><br>
<h2> Please select a truth questions below </h2> <br>
<input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>
<input type="radio" name="truth" value="q2"> Have you ever return too much change? <br>
<input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>
<input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>
<input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>
<input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>
<input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>
<input type="submit" value="Submit"/> <br>
</form>
</div>
<script>
function validate(e)
{
var gender = document.getElementsByName("gender");
if( document.myForm.firstname.value == "" )
{
alert( "Please provide your first name!" );
return false;
}
if( document.myForm.lastname.value == "" )
{
alert( "Please provide your last name!" );
return false;
}
if( document.myForm.email.value == "" )
{
alert( "Please provide your email!" );
return false;
}
if( (gender[0].checked == false) && (gender[1].checked == false))
{
alert( "Please provide your gender!" );
return false;
}
if( document.myForm.date.value == "" )
{
alert( "Please provide a date to be performed!" );
return false;
}
if( document.myForm.vname.value == "" )
{
alert( "Please provide a victim's name!" );
return false;
}
if( document.myForm.vemail.value == "" )
{
alert( "Please provide the victim's email!" );
return false;
}
return true;
}
</script>
dont know if is the right answer but i uses that way and after evething i pass the variable value as my defined wish and passes to the form :)
var swticher = document.getElementById('swticher-on');
var swticher_off = document.getElementById('swticher-off');
function check(e){
if(e.checked == swticher.checked)
{
// you can set the value for on as default by set valirable in it
var val = swticher.value = "1";
alert('on -> '+val);
}
else if(e.checked == swticher_off.checked)
{
// you can set the value for off as default by set valirable in it
var val = swticher.value = "0";
alert('off -> '+val);
}
}
<!-- i dont know this is the right answer but i use this way somethings -->
<div class="col-sm-2">
<input type="radio" id="swticher-on" name="swticher" value="1" class="form-control swticher-in" onclick="check(this)">
<label for="swticher-on">ON</label>
</div>
<div class="col-sm-2">
<input type="radio" id="swticher-off" name="swticher" value="0" class="form-control swticher-in" checked onclick="check(this)">
<label for="swticher-off"><b class="text-danger">OFF</b></label>
</div>
I made an application for people to fill out an application. I did some of the in form validation but now I want to ensure that when the user hits the submit button it checks to ensure that all field are filled out. I am stuck and cannot figure out the last part of this puzzle.
I believe all I need to make this work is a Application.js If someone could take a look at this and let me know what if anything I am missing. I did not include the CSS sheet or photos. Thank you for taking the time to help.
Here is the form. "Application.html"
<!DOCTYPE html>
<html>
<head>
<center><h1>AIFC Application Form</h1></center>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<title>AIFC Application</title>
<meta charset="utf-8">
<meta name="author" content="Paul Skinner">
<link rel="stylesheet" type="text/css" href="Application.css" />
<style type="text/css">
</style>
<script src="Application.js"></script>
<script src="Application_Library.js"></script>
<script type="text/javascript">
function updateTotal() {
var basePrice = 50;
var optionsPrice = 0;
var memberPrice = 0;
function checkPayment() {
if (document.getElementById('payment0').checked) {
optionsPrice += 1;
}
if (document.getElementById('payment1').checked) {
optionsPrice += 9.6;
}
} // end of checking for payment
function checkJumper() {
if (document.getElementById('jumper0').checked) {
optionsPrice += 0;
}
if (document.getElementById('jumper1').checked) {
optionsPrice += 4.4;
}
} // end of checking for Jumper
function checkMembership() {
if (document.getElementById('membership').value == 'Basic') {
memberPrice += 75;
}
if (document.getElementById('membership').value == 'Silver') {
memberPrice += 125;
}
if (document.getElementById('membership').value == 'Gold') {
memberPrice += 150;
}
} // end of check membership function
checkPayment();
checkJumper();
checkMembership();
var totalPrice = basePrice + (optionsPrice * memberPrice);
document.getElementById('optionsPrice').innerHTML = optionsPrice;
document.getElementById('memberPrice').innerHTML = "$ " + memberPrice;
document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;
}
</script>
</head>
<body>
<div id="top">
<nav class="horizontalNav">
<ul>
<li>Home</li>
<li>Application</li>
<li>Who We Are</li>
<li>Our Packages</li>
</ul>
</nav></div>
<section>
<table>
<tr style="white-space:nowrap; clear:both">
<td><img src="Images/girl punching.jpg" alt="Girl Punching" style=" float:left; height:200px" /></td>
<td><img src="images/fitness.jpg" alt="Weights" style=" float:right; height:200px; width:900px" /></td>
</tr>
</table>
</section>
<form action="#" method="get" name="application" id="application" >
<div id="form">
<fieldset>
<legend>Payment Type</legend><br>
<input type="radio" name="payment" id="payment0" value="payment0" onchange="updateTotal()"> Monthly membership <br>
<input type="radio" name="payment" id="payment1" value="payment1" onchange="updateTotal()"> Yearly membership <b>Big Savings!</b> <br><br>
</fieldset>
<fieldset>
<legend>Choose a Location</legend><br>
<input type="radio" name="jumper" id="jumper0" value="jumper0" onchange="updateTotal()"> Single Gym location
<input type="radio" name="jumper" id="jumper1" value="jumper1" onchange="updateTotal()"> All Locations <br><br>
</fieldset>
<fieldset>
<legend>Membership Type</legend><br>
<select name="membership" id="membership" onchange="updateTotal()">
<option value="Basic">Basic Membership ($75)</option>
<option value="Silver">Silver Membership ($125)</option>
<option value="Gold">Gold Membership ($150)</option><br>
</select>
</fieldset>
<fieldset>
<legend>Sex</legend><br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
</fieldset>
</div>
<div id="prices">
<table>
<tr><td>Membership Application Fee</td><td id="basePrice">$50</td></tr>
<tr><td>Option factor</td><td id="optionsPrice"></td></tr>
<tr><td>Membership</td><td id="memberPrice"></td></tr>
<tr><td>Total</td><td id="totalPrice"></td></tr>
</table>
</div>
<div id="info">
<fieldset>
<legend>Personal Information</legend>
<label for="first_name">First Name:</label>
<input type="text" id="firstname" name="first" required autofocus title="First Name" placeholder="First Name" />
<span id="first_name_error"> </span><br>
<label for="last_name">Last Name:</label>
<input type="text" id="lastname" name="last" required title="Last Name" placeholder="Last Name"/>
<span id="last_name_error"> </span><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required title="Address" placeholder="Address"/>
<span id="address_error"> </span><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" required title="City" placeholder="City"/>
<span id="city_error"> </span><br>
<label for="state">State:</label>
<input type="text" id="state" maxlength="2" name="State" required title="State" placeholder="State"/>
<span id="state_error"> </span><br>
<label for="zip_code">Zip Code:</label>
<input type="text" id="zip" name="zip" required title="Zip Code" placeholder="Zip Code" pattern="\d{5}([\-]\d{4})?"/>
<span id="zip_error"> </span><br>
<label for="phone_number">Phone Number:</label>
<input type="text" id="phone" name="phone" required title="Optional Phone Number 999-999-9999" placeholder="999-999-9999" pattern="\d{3}[\-]\d{3}[\-]\d{4}"/>
<span id="phone_error"> </span><br>
<label for="date_of_birth">Date of Birth:</label>
<input type="date" name="date" required title="MM-DD-YYYY"/>
<span id="date_error"> </span><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required title="Email" placeholder="Email Address"/>
<span id="email_error"> </span>
<br>
</fieldset>
<br><br><center><input type="submit" id="submit" value="Become a Member"></center>
<br><center><input type="Reset" id="btn1" value="Reset Form"></center>
</div>
<br><br><div class="footer">
<address><center>
<b>American InterContinental Fitness Center</b> ☀
1578 Perseverance Lane ☀
Simple City, IL 60001
<br/> (630)432-1425
</address></center>
<br>
</div>
</form>
</body>
</html>
The next is the js: "Application_Library.js"
var $ = function (id) { return document.getElementById(id); }
var application = function () {
// All the different fields
this.field = [];
this.field["first_name"] = {};
this.field["last_name"] = {};
this.field["address"] = {};
this.field["city"] = {};
this.field["state"] = {};
this.field["zip"] = {};
this.field["phone"] = {};
this.field["date"] = {};
this.field["email"] = {};
// Field messages
this.field["state"].message = "Please use only a two letter State abbreviation.";
this.field["zip"].message = "Please use a 5 or 9 digit Zip Code";
this.field["phone"].message = "Please use 123-456-7890 format.";
this.field["email"].message = "Must be a vaild email address.";
// Error messages
this.field["email"].required = "Email is required";
this.field["confirmemail"].required = "Please confirm your email!";
this.field["confirmemail"].noMatch = "Emails do not Match!", "email";
this.field["first_name"].required = "First names are required.";
this.field["last_name"].required = "Last names are required.";
this.field["address"].required = "An Address is required";
this.field["city"].required = "A City is required";
this.field["state"].required = "A State is required";
this.field["state"].isState = "State invalid";
this.field["zip"].required = "A Zip code is required.";
this.field["zip"].isZip = "Zip code is invalid";
this.field["phone"].required = "A phone number is required";
this.field["phone"].isPhone = "The phone number is invalid";
this.field["date"].required = "Your date of birth is required";
}
Instead of writing your own javascript validation you can use the jQuery "form Validation Plug-in", which is an excellent tool for web pages to validate data entries at the client side using JavaScript. It's very simple to use.
Here is a sample tutorial
http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin
You should implement server side validation also for best security.
You can't just check data on JavaScript, you should also check it on server-side, because the client side is more accessible and user can change the JavaScript or even disable it, so the data would be invalidated.
You should write server-side validation too.
You forgot to show the Application.js file.
Also you can use HTML5 validation, without using any JavaScript:
http://www.sitepoint.com/html5-form-validation/