Reputation: 3
Basic form validation
I am trying form validation in Javascript, but I am stuck on something.
I have gotten the validation working, but cannot display the contents of each field in the textarea of the form at the bottom.
Any idea how I would do this?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate() {
if( document.myForm.room.value == "" ) {
alert( "Please select a room option." );
return false;
}
if( document.myForm.activity.value == "" ) {
alert( "Please select an activity." );
return false;
}
if( document.myForm.hotelname.value == "-1" ) {
alert( "Please select a hotel name." );
return false;
}
if( document.myForm.name.value == "" ) {
alert( "Please provide your name." );
document.myForm.Name.focus() ;
return false;
}
// Use isNaN to check whether there is an illegal number
if( document.myForm.zip.value == "" ||
isNaN( document.myForm.zip.value ) ||
document.myForm.zip.value.length != 5 ) {
alert( "Please provide a zip code in 5 digit format." );
document.myForm.zip.focus() ;
return false;
}
return( true );
}
</script>
</head>
<body>
<form name="myForm" action="" onsubmit="return(validate());">
Type of room: <br />
<input type="radio" name="room" value="basic">Basic<br>
<input type="radio" name="room" value="luxury">Luxury
<br /><br />
Activity: <br />
<input type="checkbox" name="activity" value="swimming">Swimming<br>
<input type="checkbox" name="activity" value="fishing">Fishing
<br /><br />
Hotel name: <br />
<select name="hotelname" multiple="multiple">
<option value="-1" selected>Select...</option>
<option value="1">Hilton</option>
<option value="2">Hampton Inn</option>
<option value="3">Holiday Inn</option>
</select>
<br /><br />
Conferee's name:<input type="text" name="name">
<br /><br />
Conferee's zip code:<input type="text" name="zip">
<br /><br />
<input type="submit" value="Submit" />
<br /><br />
<textarea rows="10" cols="50"></textarea>
</form>
</body>
</html>
Upvotes: 0
Views: 754
Answers (2)
Reputation: 3890
// Use isNaN to check whether there is an illegal number
if( document.myForm.zip.value == "" ||
isNaN( document.myForm.zip.value ) ||
document.myForm.zip.value.length != 5 ) {
alert( "Please provide a zip code in 5 digit format." );
document.myForm.zip.focus() ;
return false;
}
// create the textarea content string
var fields_contents = "";
fields_content += "room : " + document.myForm.room.value + "\n";
fields_content += "activity : " + document.myForm.activity.value + "\n";
fields_content += "hotelname : " + document.myForm.hotelname.value + "\n";
fields_content += "name : " + document.myForm.name.value + "\n";
fields_content += "zip : " + document.myForm.zip.value + "\n";
//set the textarea content
document.getElementById('my_textarea').value = fields_content;
//and then return false for the form not to be submitted
return false;
Notice I use an id to find the textarea : you should add it in your html.
The \n char is line break.
This version implies your form not to be submitted. The thing is that here we get inputs values directly by reading their value property. If the form was submitted, the page would be refreshed, and the inputs values would be empty then. In this case, the solution would be to get the sent values with PHP, and then use these values directly in Javascript, like that :
var room_value_sent = '<?php echo $_REQUEST['room']; ?>';
fields_content += "room : " + room_value_sent + "\n";
The return false at the end is because of the need not to submit the form. When you do something like onsubmit="return my_function();", if my_function returns false then the form is not submitted (= no page refresh and no request is done).
Upvotes: 1
Reputation: 121
Sorry for answering instead of commenting - repuration limitations. You can try using Parsley.js library which provides clean code and works out of the box for almost any form you can imagine. Have a look here:
Upvotes: 0