Javascript code to verify user entered the right information
I am currently working on JavaScript. This is what I have so far..
<script type="text/javascript">
function formCheck(){
var emailFilter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA- Z0-9]{2,4})+$/;
if (document.form.frmName.value==''){
alert('Please enter your name');
document.form.frmName.focus();
document.getElementById("reqName").style.fontWeight="bold";
return false;
}
if (!(emailFilter.test(document.form.frmEmail.value))){
alert('Please enter your email address correctly');
document.form.frmEmail.focus();
document.getElementById("reqEmail").style.fontWeight="bold";
return false;
}
return true;
}
function submitForm() [
if (document.forms[0].firstName.value==""
|| document.forms[0].lastName.value=="") {
window.alert("You must enter your first and last names!");
return false;
}
else
return true;
}
</script>
</head>
<body>
<h2>**RSVP to my Party**</h2>
<form action="myform" method="post" name="form" onsubmit="return formCheck()">
<table>
<tr>
<td><span id="reqName"> First Name:</span></td>
<td><input type="text" name="frmName"></td>
</tr>
<td><span id="reqName"> Last Name:</span></td>
<td><input type="text" name="frmName"></td>
</tr>
<td&g开发者_运维百科t;<span id="reqName"> Number of Guest:</span></td>
<td><input type="text" name="NumberofGuest"></td>
</tr>
<td><span id="reqName"> Time Arriving:</span></td>
<td><input type="text" name="TimeArriving"></td>
</tr>
<tr>
<td><span id="reqEmail"> Email:</span></td>
<td><input type="text" name="frmEmail">
<input type="submit" value="Send" class="submit" /></td>
</tr>
<tr>
<td><span id=Submit"><input type="Submit" value="Submit" /></td>
<td><span id="reset"><input type="reset" value="Start Over" /></td>
</tr>
</table>
</form>
</body>
</html>
I am getting a little confused I need to get it where each code to verify that the users have enter the data into all the fields. Now do I take each field and make them each have a submit button for them to read that? I know the email one works right.
in your form html, call the submitForm() function:
<form action="myform" method="post" name="form" onsubmit="return submitForm();">
Then in your submitForm() function, call all the testing functions:
function submitForm()
{
if (document.forms[0].firstName.value==""
|| document.forms[0].lastName.value=="")
{
window.alert("You must enter your first and last names!");
return false;
}
else
// this is short for 'if nameCheck() == true && whateverCheck == true && ...'
return formCheck() && nameCheck() && whateverCheck();
}
Remark: If the user made several mistakes, you must modify the checking call to directly find all mistakes like this:
//...
else
{
var allOk = true;
allOk = formCheck() ? allOk : false;
allOk = nameCheck() ? allOk : false;
allOk = whateverCheck() ? allOk : false;
return allOk;
}
Inside of each testing function, you can modify the field that's being tested to show errors in the user's input, e.g. by changing the inputLabel.style.color='red'.
Edit:
You should create a single, simple function for each field type you want to test.
Typical field types for input type="text" are:
- numeric field (e.g. age)
- general text field (e.g. name, street, profession, ...)
- specific data fields (examples:)
- zip code
- date
- time
- ip address
This way you will probably be able to use the same function for first and last name instead of creating two separate functions. That also means you can take them with you to your next project instead of needing to program everything again...
These testing functions will take an object (i.e. an input field) and return a boolean:
function testMyNameTextField(var testfield)
{
// check if testfield isn't null and is valid
var nameTextFilter = /someregexp/;
var everythingIsOk = (testfield.value != '') && (nameTextFilter.test(testfield.value));
testfield.style.borderColor = everythingIsOk ? '' : 'red';
return everythingIsOk;
}
You can of course separate the testing and the invalid field markup into two different functions.
Finally, for each text input field you want to test, call the appropriate testing function.
Modify your submitForm to this
function submitForm() {
if (document.forms[0].firstName.value==""
|| document.forms[0].lastName.value=="") {
window.alert("You must enter your first and last names!");
return false;
}
}
Call submitForm inside formCheck would make sure that the form is validated before submitted to the webserver.
You don't need to have submit buttons for each of the fields. Each of those will just send all the fields to the server anyway.
To check for mistakes, you could just make the form execute a js code on submit, like this:
<form action="..." onsubmit="return validateData(this)">
Then you'd have a code like:
function validateData(form) {
if (form.age.value < 0) {
alert("age"); return false;
}
// etc
return true;
}
where you could use the form object that was passed as a parameter to check that the fields are correct, and return true iff the data is correctly formatted. If your function returns false, the form simply won't be submitted.
Additionally you should also execute an alert("Field X is wrong: reason") or something like that before returning false to let the user know why the form wasn't submitted.
加载中,请稍侯......
精彩评论