Develop Reference

Scripts for form validation in Javascript

These are the scripts for a Form and I would like to do the followings:
To ensure date, time, no are inputted and selected (no spaces and left empty) which time is an option selection and I don't know how to validate it in myFunction1 if (isNaN(no) || isNaN(date) || date == "" || no == "" || no == " ")
After ensuring no empty fields that date, time, no are inputted and selected, run this code (Math.floor(Math.random() * 2) == 0)) to get a result of True or False and return a message respectively
Thanks!

I do not know why you have used isNaN(date) for date. but you can use it as per your requirement.
Try below solution
<form action="#" method="get" onreset="return check();" ;>
<fieldset>
<legend>Reservation</legend>
<table width="300">
<caption></caption>
<thread>
<tr>
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<tr>
<td>Date:</td>
<td><label><input type="text" id="date" name="date" placeholder="dd/mm/yyyy"></label></td>
<tr>
<td>Time:</td>
<td>
<select id="time" name="time:" style="width:173px; height:22px">
<option selected="selected">Please select</option>
<option>12:00 - 2:00pm</option>
<option>2:00pm - 4:00pm</option>
<option>4:00pm - 6:00pm</option>
</select>
</td>
</tr>
<tr>
<td>No. of Guests:</td>
<td><label><input type="text" id="no" name="no. of Guests"></label></td>
</tr>
<tr>
<td id="demo" colspan="2" style="display:none">Data not completed, please re-enter</td>
<td></td>
</tr>
<tr>
<td id="result" colspan="2"></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><label><button type="button" onclick="myFunction()" name="Check Availability" value="Check Availability" style="width:173px; height:25px">Check Availability</button></label></td>
<td><label><input type="reset" onclick="myFunction3()" name="Reset" value="Reset" style="width:173px; height:25px"></label></td>
</tr>
</tfoot>
</table>
</fieldset>
</form>
<script>
function myFunction() {
function myFunction2() {
if ((arguments.length != 3) && (Math.floor(Math.random() * 2) == 0))
return false
else return true;
}
document.getElementById("result").innerHTML = myFunction1() ? (myFunction2() ? 'Reservation done. Thank you.' : 'No table is available for the date and time.') : '';
}
</script>
<script>
function myFunction1() {
var date = document.getElementById("date").value;
var no = document.getElementById("no").value;
var myDiv = document.getElementById("demo");
if (isNaN(no) || isNaN(date) || date == "" || no == "" || no == " ") {
myDiv.style.display = "block";
return false;
}
else {
myDiv.style.display = "none";
return true;
}
}
</script>
<script>
function myFunction3() {
document.getElementById("demo").style.display = "none";
document.getElementById("result").innerHTML = "";
}
</script>

Return Booleans in function like this:
function myFunction(){
if(myFunction1()) return;
//If not error in inputed data then continue...
}
function myFunction1(){
//Check if data is correct or not?
if(correctData){
return false;
}else{
return true; //wrong data, stop executing myFunction
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="get" onreset="return check();" ;>
<fieldset>
<legend>Reservation</legend>
<table width="300">
<caption></caption>
<thread>
<tr>
<th></th>
<th></th>
</tr>
</thread>
<tbody>
<tr>
<td>Date:</td>
<td><label><input type="text" id="date" name="date" placeholder="dd/mm/yyyy"></label></td>
<tr>
<td>Time:</td>
<td>
<select id="time" name="time:" style="width:173px; height:22px">
<option selected="selected" value="0">Please select</option>
<option>12:00 - 2:00pm</option>
<option>2:00pm - 4:00pm</option>
<option>4:00pm - 6:00pm</option>
</select>
</td>
</tr>
<tr>
<td>No. of Guests:</td>
<td><label><input type="text" id="no" name="no. of Guests"></label></td>
</tr>
<tr>
<td id="demo" colspan="2" style="display:none">Data not completed, please re-enter</td>
<td></td>
</tr>
<tr>
<td id="result" colspan="2"></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><label><button type="button" onclick="myFunction()" name="Check Availability" value="Check Availability" style="width:173px; height:25px">Check Availability</button></label></td>
<td><label><input type="reset" onclick="myFunction3()" name="Reset" value="Reset" style="width:173px; height:25px"></label></td>
</tr>
</tfoot>
</table>
</fieldset>
</form>
<script>
function myFunction() {
if(myFunction1()) return;
function myFunction2() {
if ((arguments.length != 3) && (Math.floor(Math.random() * 2) == 0))
return false
else return true;
}
document.getElementById("result").innerHTML = myFunction2() ? 'Reservation done. Thank you.' : 'No table is available for the date and time.';
}
</script>
<script>
function myFunction1() {
var date = document.getElementById("date").value;
var no = document.getElementById("no").value;
var myDiv = document.getElementById("demo");
var time = document.getElementById("time");
if (isNaN(no) || isNaN(date) || date == "" || time.value == 0 || !time.value || no == "" || no == " ") {
myDiv.style.display = "block";
return true; //error
}
else {
myDiv.style.display = "none";
return false;
}
}
</script>
<script>
function myFunction3() {
document.getElementById("demo").style.display = "none";
document.getElementById("result").innerHTML = "";
}
</script>

JQuery function is not being called

Below is my HTML code to handle, on click of id, it has to call javascript function viewLineActionURL and then to controller. Both of the alerts are coming, but still it is not calling the controller modifyLine method.
<script>
var viewLineActionURL;
$(document).ready(function() {
viewLineActionURL = function(obj) {
alert('view*' + obj + '*');
$("#formname").attr("action",obj); // To Controller
alert('false..');
};
});
</script>
<table class="tg" id="pResultsjoin">
<thead align="left">
<tr>
<th class="tg"><input type="checkbox" id="all" disabled="disabled" onclick="toggle(this);" /></th>
<th class="tg">Person Id#</th>
<th class="tg">Age</th>
</tr>
</thead>
<tbody align="left">
<tr th:each="map : ${list}">
<td class="tg bg"><input type="checkbox" class="checkboxclass" name="check" th:value="${map['PID']}" /></td>
<td class="tg bg em" th:id="${map['PID']}" th:name="${map['PID']}" th:text="${map['PID']}" th:onclick="'javascript:viewLineActionURL(\'' + #{/LineController/modifyLine} + '\')'" ></td>
<td class="tg bg" th:text="${map['AGE']}"></td>
</tr>
</tbody>
</table>
But I have this below similar code working:
Button:
<input type="submit" value="Modify" class="btn btn-primary" id="modifyLine" th:onclick="'javascript:modifyLineActionURL(\'' + #{/LineController/modifyLine} + '\')'" />
Javascript:
modifyLineActionURL = function(obj) {
if ($('.checkboxclass:checked').length == 1) {
$("#formname").attr("action",obj);
} else if ($('.checkboxclass:checked').length > 1) {
alert('Please select only one quotation line');
} else {
alert('Please select a quotation line');
}
};
Can anyone help on this issue

Javascript submit function returns Object is not a function error

Am using this function for the form submission just after one last check of 2 fields. But when submitting the form using javascript it returns the Object is not a function error. Didnt pasted the entire code of this page. pasted the required fields for this function. Any helps appreciated
<script type="text/javascript">
function validamt(strval){
var letters = /^[0-9]+(\.[0-9]{1,2})?$/;
if (letters.test(strval)) {
return true;
} else {
return false;
}
}
function validno(strval){
var letters = /^\d+$/;
if (letters.test(strval)) {
return true;
} else {
return false;
}
}
function finalcheck(){
var discount=$("#discount").val();
var stax=$("#stax").val();
var err=0;
if(discount!="In Rupees only" || stax!="(%)"){
if(!validno(stax)){err=1; alert('Invalid Service Tax');$("#stax").focus();}
if(!validamt(discount)){err=1;alert('Invalid Discount Amount');$("#discount").focus();}
}
alert(err);
if(err==0){
try{
document.getElementById('billsetupprocess').action="storebilling.php";
document.getElementById('billsetupprocess').submit();
}
catch(e){
alert(e);
}
}
}
</script>
<form name="billsetupprocess" id="billsetupprocess" method="post" action="storebilling.php" enctype="multipart/form-data" >
<table>
<tr>
<td>Discount</td>
<td><input name="discount" type="text" class="txtclass" id="discount" value="<?php if($discount!=""){echo $discount;} else {echo("In Rupees only");}?>" autocomplete="off" onfocus="Javascript:if(this.value=='In Rupees only'){this.style.color='rgb(193,193,193)';this.value='';}" onblur="Javascript:if(this.value==''){this.style.color='rgb(193,193,193)';this.value='In Rupees only';}" onkeyup="Javascript:if(this.value!=''){this.style.color='rgb(0,133,189)';}"/></td>
<td></td>
<td> </td>
</tr>
<tr>
<td>servicetax</td>
<td><input name="stax" type="text" class="txtclass" id="stax" value="<?php if($discount!=""){echo $servicetax;}else {echo("(%)");}?>" autocomplete="off" onfocus="Javascript:if(this.value=='(%)'){this.style.color='rgb(193,193,193)';this.value='';}" onblur="Javascript:if(this.value==''){this.style.color='rgb(193,193,193)';this.value='(%)';}" onkeyup="Javascript:if(this.value!=''){this.style.color='rgb(0,133,189)';}"/>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input name="submit" id="submit" type="button" value="Save Setup" onclick="finalcheck()" class="btnclass" /></td>
<td> </td>
<td> </td>
</tr>
</table>

Javascript Form Validation won't validate

I'm having some issues validating my form. When I click to validate, it doesn't do anything other than refocus the page the first time, and the second time the page continues to the server. I've been looking for a few hours trying to find what the problem is, but I just can't see it.
Here is my Javascript code:
function formValidation() {
var uname = document.GetElementByName("UserName");
var uname = document.joinform.UserName;
var password = document.joinform.Password;
var fname = document.joinform.firstname;
var mname = document.joinform.middlename;
var lname = document.joinform.lastname;
var unationality = document.joinform.nationality;
var ulcontact = document.joinform.lpreferredcontact;
var umcontact = document.joinform.mpreferredcontact;
var uecontact = document.joinform.epreferredcontact;
var ulandline = document.joinform.dayphone;
var umobile = document.joinform.mobphone;
var uemail = document.joinform.email;
var uadd1 = document.joinform.address1;
var uadd2 = document.joinform.address2;
var upostcode = document.joinform.postcode;
var city = document.joinform.city;
var state = document.joinform.state;
var occupation = document.joinform.occupation;
var hobbies = document.joinform.hobbies;
var interest = document.joinform.interest;
if (username_validation(uname, 20, 20)) {
} else {
return false;
}
{
if (username_validation(uname, 20, 20)) {
if (password_validation(password, 20, 20)) {
if (allLetter(fname)) {
if (allLetter(mname)) {
}
}
}
}
return false;
}
if(username_validation(uname,20,20)) {
if(passid_validation(password,20,20)) {
if(allLetter(fname)) {
if(allLetter(mname)) {
if(allLetter(lname)) {
if(allLetter(unationality)) {
if(validcontact(ulcontact,umcontact,uecontact)) {
if(allnumeric(ulandline)) {
if(allnumeric(umobile)) {
if(ValidateEmail(uemail)) {
if(alphanumeric(uadd1)) {
if(alphanumeric(uadd2)) {
if(allnumeric(upostcode)) {
if(allLetter(city)) {
if(stateselect(state)) {
if(allLetter(occupation)) {
if(allLetter(hobbies)) {
if(interestselect(interest)) {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
function username_validation(uname,mx,my)
{
var uname_len = uname.value.length;
if (uname_len >= my || uname_len < mx)
{
alert("User name length should be between "+mx+" to "+my);
uname.focus();
return false;
}
return true;
}
function password_validation(password,mx,my)
{
var password_len = password.value.length;
if (password_len >= my || password_len < mx)
{
alert("Password length should be between "+mx+" to "+my);
password.focus();
return false;
}
return true;
}
function allLetter(fname)
{
var letters = /^[A-Za-z]+$/;
if(fname.value.match(letters))
{
return true;
}
else
{
alert('First name must have alphabet characters only');
fname.focus();
return false;
}
}
function allLetter(mname)
{
var letters = /^[A-Za-z]+$/;
if(mname.value.match(letters))
{
return true;
}
else
{
alert('Middle name must have alphabet characters only');
mname.focus();
return false;
}
}
function allLetter(lname)
{
var letters = /^[A-Za-z]+$/;
if(lname.value.match(letters))
{
return true;
}
else
{
alert('Last name must have alphabet characters only');
lname.focus();
return false;
}
}
function allLetter(unationality)
{
var letters = /^[A-Za-z]+$/;
if(unationality.value.match(letters))
{
return true;
}
else
{
alert('Nationality must have alphabet characters only');
unationality.focus();
return false;
}
}
function validcontact(ulcontact,umcontact,uecontact)
{
x=0;
if(ulcontact.checked)
{
x++;
}
if(umcontact.checked)
{
x++;
} if(uecontact.checked)
{
x++;
}
if(x==0)
{
alert('Select the preferred Contact method');
ulcontact.focus();
return false;
}
function allnumeric(ulandline)
{
var numbers = /^[0-9]+$/;
if(ulandline.value.match(numbers))
{
return true;
}
else
{
alert('landline number must have numeric characters only');
ulandline.focus();
return false;
}
}
function allnumeric(umobile)
{
var numbers = /^[0-9]+$/;
if(umobile.value.match(numbers))
{
return true;
}
else
{
alert('mobile number must have numeric characters only');
umobile.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
}
function alphanumeric(uadd1)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd1.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd1.focus();
return false;
}
}
function alphanumeric(uadd2)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd2.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd2.focus();
return false;
}
}
function allnumeric(postcode)
{
var numbers = /^[0-9]+$/;
if(postcode.value.match(numbers))
{
return true;
}
else
{
alert('postcode must have numeric characters only');
postcode.focus();
return false;
}
}
function allLetter(city)
{
var letters = /^[A-Za-z]+$/;
if(city.value.match(letters))
{
return true;
}
else
{
alert('City must have alphabet characters only');
city.focus();
return false;
}
}
function stateselect(state)
{
if(state.value == "Default")
{
alert('Select your state from the list');
state.focus();
return false;
}
else
{
return true;
}
}
function allLetter(occupation)
{
var letters = /^[A-Za-z]+$/;
if(occupation.value.match(letters))
{
return true;
}
else
{
alert('Occupation must have alphabet characters only');
occupation.focus();
return false;
}
}
function allLetter(hobbies)
{
var letters = /^[A-Za-z]+$/;
if(hobbies.value.match(letters))
{
return true;
}
else
{
alert('Hobbies must have alphabet characters only');
hobbies.focus();
return false;
}
}
function interestselect(interest) {
if (interest.value == "Default") {
alert('Select your interest from the list');
interest.focus();
return false;
}
else {
alert('Form is Successfully Submitted, thank you');
window.location.reload()
return true;
}
}
Here is my html code:
<form action="http://******/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return check_compulsory(joinform);">
<form action="http://********/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return formValidation();">
<form name="loginform" onsubmit="return loginValidation();">
<table style="margin: 0px auto;">
<tr>
<td>UserName:</td>
<td><input type="text" name="UserName" value="" size="20" maxlength="40" /></td>
<td></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="Password" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
</table>
<div style=margin-left:475px;>
<input type="submit" value="Sign In" />
</div>
</form>
<br>
<h1>Join Us Today!</h1>
<p>Please complete this simple form to Sign Up to CWON-Australia!</p>
<p style=color:blue;>*CompulsoryField</p>
<form action="http://******/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return check_compulsory(joinform);">
<form action="http://******/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return formValidation()">
<form name="joinform" onsubmit="return formValidation()">
<table>
<tr>
<td>First Name:*</td>
<td><input type="text" name="firstname" value="" size="20" maxlength="40" /></td>
<td></td>
</tr>
<tr>
<td>Middle Name:</td>
<td><input type="text" name="middlename" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
<tr>
<td>Last Name:*</td>
<td><input type="text" name="lastname" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
<tr>
<td>Date Of Birth*</td>
<td><input type="text" name="dateofbirth" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td><input type="text" name="nationality" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
<tr>
<td>Preferred Contact Method: *</td>
<td><input type="radio" name="preferredcontact" id="cl" value="L" /> Landline</td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="preferredcontact" id="cm" value="M" /> Mobile</td>
</tr>
<tr>
<td></td>
<td><input type="radio" name="preferredcontact" id="ce" value="E" checked="checked" /> E-Mail</td>
</tr>
<tr>
<td>Landline Phone Number:</td>
<td><input type="text" name="dayphone" value="" size="20" maxlength="20" /></td>
</tr>
<tr>
<td>Mobile Phone Number:</td>
<td><input type="text" name="mobphone" value="" size="20" maxlength="20" /></td>
</tr>
<tr>
<td>e-Mail Address: *</td>
<td><input type="text" name="email" value="" size="30" maxlength="30" /></td>
</tr>
<tr>
<td>Address Line 1: *</td>
<td><input type="text" name="address1" value="" size="40" maxlength="40" /></td>
</tr>
<tr>
<td>Address Line 2: *</td>
<td><input type="text" name="address2" value="" size="40" maxlength="40" /></td>
<td></td>
</tr>
<tr>
<td>Postcode: *</td>
<td><input type="text" name="postcode" value="" size="4" maxlength="4" /></td>
<td></td>
</tr>
<tr>
<td>City: *</td>
<td><input type="text" name="city" value="" size="25" maxlength="25" /></td>
<td></td>
</tr>
<tr>
<td>State: *</td>
<td>
<select name="state" size="1">
<option selected = "selected">Please Choose</option>
<option>NSW</option>
<option>VIC</option>
<option>WA</option>
<option>SA</option>
<option>TAS</option>
<option>QLD</option>
<option>ACT</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Occupation:</td>
<td><input type="text" name="occupation" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type="text" name="hobbies" value="" size="20" maxlength="60" /></td>
<td></td>
</tr>
<tr>
<td>You Are Interested in:* </td>
<td>
<select name="interest" size="1">
<option selected = "selected">Please Choose</option>
<option>Fund Raisers</option>
<option>Domestic Volunteering</option>
<option>Foreign Volunteering</option>
<option>All of Them</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="TandC" id="TandC" value="yes" checked="checked"> </td>
<td>I have read the Terms & Conditions of being the member of CWON-Australia, and I agree to abide by the rules and regulations.</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="newsletter" id="newsletter" value="yes" checked="checked"></td>
<td>Sign Up for CWON-Australia Newsletter.</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="hidden" name="signupdate" value="" /></td>
<td></td>
</tr>
</table>
<div align="right">
<input type="reset" value="Reset" onclick="set_focus()" />
<input type="submit" value="Join Now!" />
</div>
</form>

Delete all your messy code and try jQuery.validate or Really simple validation .
You are welcome~

Check out AngularJS. If you're writing large javascript-oriented web applications it can make your life a lot easier.

Form "submit" working in IE but not Firefox and Chrome

I have a sign up form on my site which works OK in IE but does not work in Firefox or Chrome. I have tried looking through other forum posts here with similar problems but still can't get my head round this silly problem. (I am not a code writer).
Here is the code
<script type="text/JavaScript">
function validate_form(){
{validation_text}
else{
return true;
}
}
var str_vars = '';
function all_fields(){
str_vars = '';
el = document.form1;
for (var i = 0; i < el.elements.length; i++) {
if (el.elements[i].value != '')
str_vars += el.elements[i].name+'='+el.elements[i].value+'&';
}
str_vars = str_vars.substr(0,str_vars.length-15);;
}
</script>
<div id="div_form" name="div_form">
<form id="form1" name="formx" method="{send_method}" action="{form_switch}">
<p> </p>
<table border="0" width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
{error}
{signup_list}
<tr>
<td align="right">{description_country} </td>
<td>{shiping_country_list}{required_country}</td>
</tr>
<tr><td align="right"> {promo}</td></tr>
{code_signup}
<tr>
<td colspan="2"><div align="center">
<input name="terms" id="terms" value="1" type="checkbox">
<label for="terms">I accept the terms & conditions</label>
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center">
{captcha}</td>
</tr>
{arp_fields}
<tr>
<td><div align="right">*</div><br></td>
<td width="332">Denotes required</td>
</tr>
<tr>
<td>
<div align="right">
<input name="Submit" value="Submit" type="button" onclick="{request}{request_email}{form2items}">
</div></td>
<td> <br></td>
</tr>
</table>
</form>
</div>
</div>
Any help would be appreciated.

Maybe instead of
el = document.form1;
try
el = document.getElementById('form1');
I can't see all the JS so it is hard to guess, but one other thing to try is to change the name of the submit button from name="Submit" to something else like name="submitForm". If form.submit() is getting called somewhere in the script this can cause problems.
Your validate function should look something like this:
function validate_form(){
var form = document.getElementById('form1');
err = 'The following fields are not correct filled:\n';
if (form.first_name.value == ''){
err += 'No First Name.\n';
}
if (emailCheck(form.email.value) == false){
err += 'No Valid email.\n';
}
if (form.terms.checked != true){
err += 'You did not agree with the terms.\n';
}
if (err != 'The following fields are not correct filled:\n'){
alert (err);
return false;
}
else{
return true;
}
}
Lastly, change your submit button to this:
<input name="Submit" value="Submit" type="button" onclick="if (validate_form()) document.getElementById('form1').submit();">