I'm making a signup page using HTML and javaScript and it was working fine until I added a function to take the user to the next page, the problem is, if the textboxes where blank and I click on the button, it sends him to the next page instead of showing a validation error to fill them out.
here is the code of the function:
function signup() {
window.location.replace("file:///C:/Users/hb/Desktop/web%20project/afterlogin.html");
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
here is the html code for the form:
<form method="post" class="info">
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<p>
<label for="password" required> Password:</label>
<input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="confirmpass">Confirm password:</label>
<input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="gender">Gender:</label>
<select id="gender">
<option id="male"> Male </option>
<option id="female"> Female </option>
</select><br /><br />
</p>
<p>
<label for="age">Age:</label>
<select id="age">
<option id="young">Young(12-18 years old) </option>
<option id="youth">Youth(19-40 years old) </option>
<option id="old">Old(more than 40 years) </option>
</select><br /><br />
</p>
<div class="terms">
<p>
<input type="checkbox" id="terms" checked="checked" required />
<label for="terms" id="terms">Agree to terms and conditions </label> <br />
</p>
</div>
<button id="button" class="signUpButton" name="SIGN UP" type="submit" onclick="signup();">SIGN UP</button> <br /><br /><br /><br />
<p class="outerAlt">Have an account already?</p>
<p class="alt">SIGN IN</p>
</form>
Instead of listening for a click on the button, listen for the form submission event
eg:
<form onsubmit="signup()">
required attribute stops the form from submitting if the field is empty, it does not stop arbitrary event handlers from changing the page.
If you want to only call your signup when the form is valid make it a form submit handler instead of a button click handler.
<form method="post" class="info" onsubmit="signup();return false;">
...
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button>
Attribute required is activating when you submit the form. You can click on any button or input inside the form, call event onclick, but it won't be submiting the form. To handle the event of submiting, you have to add onsubmit to your <form> elements and on the code below. Note, that the form submit will reload the page. To avoid this, you have to prevent default behavior by adding event.preventDefault().
function signup(event) {
event.preventDefault();
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
<form method="post" class="info" onsubmit="signup(event)">
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button>
</form>
onclick event will call the function when the button is clicked without validating the form. onsubmit event is called after the form is ready to submit (After the validation)
And you can use event.preventDefault(It will stop the page reloading after the submit. More About it) to instead of using return false;
function signup(event){
event.preventDefault();
}
document.getElementById().addEventListener("submit", signup);
Add addEventListener("submit", signup); to call the function onsubmit
Ex: document.getElementById("form1").addEventListener("submit", functionName);
Ex 2:
document.getElementById("form1").addEventListener("submit", function(){
// Code
});
function signup(event) {
event.preventDefault(); location.replace("LOCATION");
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
document.getElementById("form1").addEventListener("submit", signup);
<form method="post" id="form1" class="info" data-registerForm>
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<p>
<label for="password" required> Password:</label>
<input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="confirmpass">Confirm password:</label>
<input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="gender">Gender:</label>
<select id="gender">
<option id="male"> Male </option>
<option id="female"> Female </option>
</select><br /><br />
</p>
<p>
<label for="age">Age:</label>
<select id="age">
<option id="young">Young(12-18 years old) </option>
<option id="youth">Youth(19-40 years old) </option>
<option id="old">Old(more than 40 years) </option>
</select><br /><br />
</p>
<div class="terms">
<p>
<input type="checkbox" id="terms" checked="checked" required />
<label for="terms" id="terms">Agree to terms and conditions </label> <br />
</p>
</div>
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button> <br /><br /><br /><br />
<p class="outerAlt">Have an account already?</p>
<p class="alt">SIGN IN</p>
</form>
Related
I have a multilanguage registration page. All the of it is on one HTML document, and each language is in its own div, with display:none; or display:visible depending on the language selected.
All of the forms are identical, ie. <input type="email" class="email"> is the same on all forms (with different placeholders etc.).
I would like to know how I could use a conditional statement to see which div is visible, so I could take out the appropriate class information via index.
For example, the user filled out the English registration page, I know I need to use getElementsByClassName(".email")[1].value. (index 1).
Or is there a way to detect which element in the array has actual content/value (as the specific class array will be empty, except for 1 entry).
HTML
<div class="lng" id="sl">
<div class="registerTitle">
Slo - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="Janez"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Novak"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />
<span class="radioS">Spol: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Moski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Zenski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Ostalo</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="moj#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>
<div class="lng" id="en">
<div class="registerTitle">
Eng - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="John"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'John'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Doe"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Doe'" /><br />
<span class="radioS">Gender: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Male</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Female</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Other</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="my#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'my#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>
Have a look at - how can I disable everything inside a form using javascript/jquery?
Disabling other form inputs might be an option, so when you go to submit, the form that isn't disabled submits.
Here's a way to detect if an array of inputs has a value and then log to the console. I know it's general, but I'm having a hard time understanding exactly what you need in your case:
const emailInputs = Array.from(document.querySelectorAll('.email'));
const form = document.querySelector('form');
form.addEventListener('change', () => {
const hasValue = emailInputs.filter((input) => input.value);
console.log('these inputs are active...\n');
hasValue.forEach(val => console.log(val));
});
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="en">English </label>
<input type="email" name="en" id="email" class="email">
</div>
<div class="form-example">
<label for="fr">French </label>
<input type="email" name="fr" id="email2" class="email">
</div>
<div class="form-example">
<label for="es">Spanish </label>
<input type="email" name="es" id="email3" class="email">
</div>
<div class="form-example">
<label for="it">Italian </label>
<input type="email" name="it" id="email4" class="email">
</div>
</form>
Here's a JSFiddle if you want to play with it outside of this setting.
I am a little confused here. I have most of my form completed. I just need help with getting the value of my select boxes and a function for calculating those values. Along with a code displaying an error message if a check box is not selected.
/* Starts an Array reference to set prices on Events */
var aaffa_Price = new Array();
aaffa_Price ["AAFFA Membership"] = 45;
aaffa_Price ["Early Registration"] = 135;
aaffa_Price ["Registration"] = 150;
aaffa_Price ["Early Mini Camp"] = 35;
aaffa_Price ["Mini Camp"] = 40;
aaffa_Price ["Three Mini Camp Special"] = 90;
/* This function validates selected events values and totals up the cost */
function getaaffaTotalCost()
{
var aaffa_Cost = 0;
var myForm = document.forms["aaffaForm"];
var selectedEvent = myForm.elements["selectedEvent"];
aaffa_Cost += aaffa_Price[selectedEvent.value];
return aaffa_Price;
}
function calcTotal()
{
var aaffa_Price = getaaffaTotalCost();
var divobj = document.getElementById('eventsTotalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Registration $"+aaffa_Cost;
}
function aaffaDisplay(aaffa)
{
var selAAffa = document.getElementById("spryselect1");
var selAAp = document.getElementById("spryselect2");
var girlsRad=document.getElementById("League_0");{
var boysRad=document.getElementById("League_1");
if (girlsRad.checked){
return true
selAAffa.hidden=false
}
selAAffa.hidden=true
}
}
<body>
<div class="container">
<div class="header">
<!-- end .header -->
</div>
<div class="content">
<form action="mailto:info.aaffa#gmail.com" method="post" enctype="text/plain" target="_parent" id="myForm" name: "aaffa" onsumbit="return validate(this);">
<div class="league">
<fieldset>
<legend><em>Select A League</em>
</legend>
<span id="spryradio1">
<label>
<input type="radio" name="League" value="Girls" id="League_0" onchange="aaffaDisplay" />
AAFFA</label>
<label>
<input type="radio" name="League" value="Boys" id="League_1" />
Boys Passing</label>
<br />
<span class="radioRequiredMsg">Please make a selection.</span></span>
</fieldset>
<br />
</div>
<div class="AA Events">
<fieldset>
<legend><em>ALL American Events</em>
</legend>
<span id="sprytrigger1">Select more than one?</span>
<div class="tooltipContent" id="sprytooltip1">Hold ctrl to select more than one choice</div>
<span id="spryselect1"><br />
<select name="girlsEvent" id="aaffa" multiple="multiple" onchange="addTotal">
<option value="000" name="Select AAFFA Events" selected="selected"><strong><strong>AAFFA Events</strong></strong></option>
<option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal">All American Memebership</option>
<option value="$135.00" name="Early Girl's Flag Football Registration">Early Girl's Flag Football Registration</option>
<option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option>
<option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>
<option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option>
<option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>
</select><<label for="girlsevent"></label>
<span class="selectRequiredMsg">Please select an item.</span>
<span id="spryselect2">
<select name="boysEvents" id="aapl" multiple="multiple" onchange="addTotal">
<option value="000" name="Select AA Pride Events" selected="selected">AA Pride Events</option>
<option value="$45.00" name="All American Pride Memebership" onchange="addTotal">All American Pride Memebership</option>
<option value="$135.00" name="Early Boys Passing League Registration">Early Boys Passing League Registration</option>
<option value="$150.00" name="All American Pride Flag Football Registration" >All American Memebership</option>
<option value="$35.00" name="Early Mini Camp Boys">Boys Early Mini Camp Registration</option>
<option value="$40.00" name="Mini Camp Registration Boys">Mini Camp Registration</option>
<option value="$90.00" name="3 Mini Camp Special Registration Boys">3 Mini Camp Special Registration</option>
</select> <br /><label for="event"></label>
<span class="selectRequiredMsg">Please select an item.</span></span>
<br />
<br />
<input type="text" name="aaffaTotal" id="aaffaTotal" placeholder=" " />
<input type="text" name="aapTotal" id="aapTotal" placeholder=" " />
</fieldset>
</div>
<div class="Boys Events">
</div>
<div class="contactInfo">
<fieldset>
<fieldset>
<legend><em>Contact Info</em>
</legend>
First Name:
<br />
<input name="fName" type="text" required="required" class="input" size="30" maxlength="15" placeholder="First Name" id="confName" tabindex="9" />
<br />Last Name:
<br />
<input name="lname" type="text" required="required" class="input" size="30" maxlength="45" placeholder="Last Name" id="conlName" tabindex="10" />
<br />Street:
<br />
<input name="street" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
<br />
<label for="city">City:</label>
<select name="city" class="select" id="city" tabindex="12">
<option value="000">None</option>
<option value="1">Boulder City</option>
<option value="2">Green Valley</option>
<option value="3">Henderson</option>
<option value="4">Las Vegas</option>
<option value="5">North Las Vegas</option>
</select>
State:
<input name="state" required="required" size='4' class="content" value="N.V." tabindex="13" />Zip Code:
<input type="text" name="zipCode" required="required" tabindex="14" size="15" pattern="(\d{5}([\-]\d{4})?)" maxlength="10" />
<br />
<br/>E-Mail:
<input type="text" name: "email" required="required" class="input" size="35" maxlength="50" />Phone #:
<input name="Contact Number" type="tel" required="required" size="12" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="777-777-7777" maxlength="13" />
<br/>
<div class="emerContactInfo">
<br />
<fieldset>
<legend>Emergency Contact</legend>
First Name:
<br />
<input name="pfname" type="text" required="required" class="input" size="30" maxlength="15" placeholder="Parent's First Name" tabindex="9" />
<br />Last Name:
<br />
<input name="plname" type="text" required="required" class="input" size="30" maxlength="45" placeholder="Last Name" tabindex="10" />
<br />
<label>Address:
<br />
</label>
<label>City:
<input name="pcity" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
</label>
<label>State:
<br />
<input name="pstate" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
</label>
</fieldset>
</div>
<p>
<!-- Load jQuery from Google's CDN -->
<!-- Load jQuery UI CSS -->
<input name="pstreet" type="text" required="required" class="input" size="35" maxlength="45" tabindex="11" />
<br/>
<br/>
<input type="submit" value="Submit" onclick="return getaaffaTotalCost()" />
<input type="button" value="reset" />
</p>
<p><</p>
</fieldset>
</form>
<!-- end.contactInfo -->
</div>
<!-- end .content -->
</div>
Sounds like there are a lot of questions lumped together here. Break down your problem, try to answer each question individually on your own, and if you get stuck then create another stackoverflow question!
get value of select box in javascript
"calculate those values" - you'll have to clarify that one for yourself before you attempt to solve it
check if checkbox is selected
"display error message" - you'll also have to break that down. i.e. perhaps: create html element in javascript + add text to html element in javascript
Though you haven't mentioned these, in order to validate a form you generally also need to figure out how to:
trigger a javascript function on the submission of an html form
prevent an html form from submitting
That should get you started! Good luck!
I'm having an issue with a form in firefox with multiple text input fields. When I click on a second or third input, the first text input steals focus. This happens unless I highlight something in one of the other fields (in which case it retains focus).
Has anyone ever run into this issue before?
http://codepen.io/anon/pen/jPrPYm
<div>
<form action="/forms/SaveResponse" id="qansform" method="post">
<input id="NavigationType" name="NavigationType" type="hidden" value="Update" />
<div>
<div class="question input-select">
<label>
<span class="label">Name:</span>
<input data-rule-maxlength="500" data-rule-required="true" id="FirstTextBox" name="FirstTextBox" type="text" value="" />
<br />
<br />
<span class="label">Contact:</span>
<input data-rule-maxlength="500" data-rule-required="true" id="SecondTextBox" name="SecondTextBox" type="text" value="" />
<br />
<br />
<span class="label">Phone Number:</span>
<input data-rule-maxlength="20" data-rule-required="true" id="ThirdTextBox" name="ThirdTextBox" type="text" value="" />
<br />
<br />
</label>
</div>
<div class="question input-select">
<label>
<span class="label">Date:</span>
<input class="datefield" data-rule-date="true" data-rule-required="true" id="FourthTextBox" name="FourthTextBox" type="text" value="" />
<br />
<br />
</label>
</div>
</div>
<input type="button" value="Go Back" class="cancel form-submit" onclick="cancelClick()" />
</form>
</div>
The problem is that you were using <label> tags wrongly. Here's an example of how to do it:
<label for="FirstTextBox">
<span class="label">Name:</span>
</label>
<input data-rule-maxlength="500" data-rule-required="true" id="FirstTextBox" name="FirstTextBox" type="text" value="" />
And here is your example fixed http://codepen.io/anon/pen/NqrqYd
I have a problem, I want to show some specific field when i select a specific radio button. I did that and I test on this page (http://jsfiddle.net/niklakis/cw0qLnk5/5/) but when i get the code (which is the below) it does not show the specific fields when I select the radio button.
Can you help me please?
THIS IS THE WHOLE CODE ....
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$("input[type='radio']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorRegister").show();
} else {
$("#DoctorRegister").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
}
});</script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<input style="display:none;" type="text" name="DoctorRegister" id="DoctorRegister" />
<br/>
<br/>
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGM" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGF" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
</fieldset>
</body>
</html>
You're executing your code before the document is rendered. Either:
Move your code to the end of the document before the closing body tag or
Put your code in a document ready handler in the head like:
$( document ).ready(function() {
// your code here
});
jsFiddle example
$("input[type='radio']").change() will fire for all inputs of type radio button. So, try with:
$("input[type='radio'][name='answer']").change()
I am kind of new to JQuery and Javascript and need your help on what I am missing here. I know the code works in jsfiddle.net but when I actually run it on my computer it's not doing anything. I want to keep the Object Oriented functions in "updated-formcheck.js" file separately.
I have a form validation HTML file with a jQuery function that calls my "updated-formcheck.js" file that checks all the empty fields and returns a msg. But when a submit button is clicked, nothing happens. Can you tell me why?
HTML file:
<script src="updated-formcheck.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function(e) {
validateNow(e);
});
});
</script>
In "updated-formcheck.js" file:
function validateNow(eventObj){
var isValid = true;
$('input[type="text"].required, textarea.required, select.required').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false) {
eventObj.preventDefault();
alert(this.e);
}else
this.s;
}
Because
$('input[type="text"].required, textarea.required, select.required')
in your code currently return an empty array, so each function is not called.
This is because you are looking for dom elements with a css class "required" that you doesn't have.
To get your code working I added a "required" class, which your js code is looking for, on the city element. I also updated the jQuery bind event to the form submit instead of a button click.
<html>
<head>
</head>
<body>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" class="required" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="updated-formcheck.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myform').on('submit', function(e) {
//e.preventDefault();
validateNow(e);
return false;
});
});
</script>
</body>
</html>