This is my form that I use to post data. All of it works just fine in terms of inputting. This is just for reference to my javascript validation form.
<form action= "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" name="input" id="input">
<br>
<table>
<tr>
<th>Animal Name</th>
<td><input type="text" name="ANM_NAME" id="ANM_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Owner Name</th>
<td><input type="text" name="OWN_NAME" id="OWN_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Sign in</th>
<td><input type="date" name="SIGN_IN" id="SIGN_IN"></td>
</tr>
<tr>
<th>Medication</th>
<td><input type="text" name="MEDS" id="MEDS" maxlength="20"></td>
</tr>
<tr>
<th>Special Requirements</th>
<td><input type="text" name="SPEC" id="SPEC" maxlength="20"></td>
</tr>
<tr>
<th>Food</th>
<td><input type="text" name="FOOD" id="FOOD" maxlength="20"></td>
</tr>
<tr>
<th>Notes</th>
<td><input type="text" name="NOTE" id="NOTE" maxlength="20"></td>
</tr>
</table>
<br>
<input type="button" id="button" value="Submit">
</form>
Currently I have this for validation, on the button click it sets the var flag to true and then checks input type text to see if they have text, if they do it submits, if not it creates pop-up alert.
<!-- Checking if inputs are entered-->
<script>
$("#button").click(function(){
var flag=true;
// check all input values
$("input[type='text']").each(function(){
if( $(this).val()=="" ){
flag=false;
}
});
// submit the form
if(flag){
$("form#input").submit()
}else{
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
But it does not work for the date as it is using a different input type. How would I add the date input to this validation?
You can select more then one type of input using a delimiter:
<script>
$("#button").click(function() {
var flag = true;
// check all input values
$("input[type='text'],input[type='date']").each(function() {
if ($(this).val() == "") {
flag = false;
}
});
// submit the form
if (flag) {
$("form#input").submit()
} else {
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
Related
<script>
function validate() {
var v1 = document.myform.ename.value;
var v2 = document.myform.eid.value;
if (v1 == "" || v1 == null) {
alert("enter the user name");
}
if (v2.length <= 4 && v2.length == "") {
alert("enter the pwd greater then 4 character");
}
}
</script>
</head>
<body bgcolor=black>
<form name="myform" onsubmit="validate">
<div>
<table border="1">
<tr>
<th colspan="2" width="100%"><font size="5"> Login</font></th>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="ename"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="eid"></td>
</tr>
<tr>
<td><input type="Button" value="Submit">
<td><input type="Reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2"><a href="register.html"> <font color=white>Register
Here</font>
</a></td>
</tr>
</table>
</div>
</form>
here i posted my code when i try to validate html page it doesn't give output what problem is in??
here i posted my code when i try to validate html page it doesn't give output what problem is in??
You have a few things wrong in your code, I attached the corrected code below.
First you have to change the submit button from type="button" to type="submit"
Second try to do your on submit in javascript, that way you can pass e with the event info. Then you can use e.preventDefault(); to prevent the form from submitting.
Also, your boolean algebra was a little off. You had v2.length <= 4 && v2.length == "", but the && needs to be changed to an ||.
document.getElementById('myform').onsubmit = function(e) {
e.preventDefault();
validate();
}
function validate() {
var v1 = myform.ename.value;
var v2 = myform.eid.value;
if (v1 == "" || v1 == null) {
alert("enter the user name");
}
if (v2.length <= 4 || v2.length == "") {
alert("enter the pwd greater then 4 character");
}
}
<body bgcolor=black>
<form name="myform" id="myform">
<div>
<table border="1">
<tr>
<th colspan="2" width="100%">
<font size="5"> Login</font>
</th>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="ename"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="eid"></td>
</tr>
<tr>
<td><input type="submit" value="Submit">
<td><input type="Reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2">
<a href="register.html">
<font color=white>Register Here
</font>
</a>
</td>
</tr>
</table>
</div>
</form>
I hope that this helps you! If you don't understand please ask, and I will help you.
Your button needs to be type submit and also as Mike stated it needs to be onsubmit="validate()".
function validate() {
var v1 = document.myform.ename.value;
var v2 = document.myform.eid.value;
if (v1 == "" || v1 == null) {
alert("enter the user name");
}
if (v2.length <= 4 && v2.length == "") {
alert("enter the pwd greater then 4 character");
}
}
<form action="#" name="myform" onsubmit="validate()">
<div>
<table border="1">
<tr>
<th colspan="2" width="100%">
<font size="5"> Login</font>
</th>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="ename"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="eid"></td>
</tr>
<tr>
<td><input type="submit" value="Submit">
<td><input type="Reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2">
<a href="register.html">
<font color=white>Register Here
</font>
</a>
</td>
</tr>
</table>
</div>
</form>
Please help if you are seeing this.I want to pre-populate the form-field with row data after clicking on the same row.
SIMILAR TO THIS DEMO:http://jsbin.com/qavugo/2/edit?html,js,output
Problem is faced now. fillForm() function is OK(AS SHOWN IN THE DEMO inside the scripts) in order to populate the form field with row data.HOW DO I GET ROW DATA? But as I am populating the table using jsp like this
<table class="data-table" id="test" border="1">
<tr>
<td>Student ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Year Level</td>
</tr>
<c:foreach items="${allStudents}" var="stud">
<tr>
<td>${stud.studentId}</td>
<td>${stud.firstname}</td>
<td>${stud.lastname}</td>
<td>${stud.yearLevel}</td>
</tr>
</c:foreach>
</table>
Which makes it more difficult for me for getting the rowData than what is showed in the DEMO.
MY FORM
<form name="frm" class="data-form" action="./StudentServlet" method="POST" onsubmit="return validateForm()">
<tr>
<td>
<label>Student ID --></label><input type="text" name="studentId" value="${student.studentId}" />
</td>
<td>
<label>First Name --></label><input type="text" name="firstname" value="${student.firstname}" />
</td>
<td>
<label>Last Name --></label>
<input type="text" name="lastname" value="${student.lastname}" />
</td>
<td>
<label>Year Level --></label><input type="text" name="yearLevel" value="${student.yearLevel}" />
</td>
</tr>
</form>
THE SCRIPTS
$(function() {
// I am not using dummy data here.
var rowData = [
// how and what should go here.Please help
];
row.on("click", function() {
fillForm(rowData);
});
return row;
});
$(".data-table").append(rows);
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
I am updating the records like this
<table>
<tr>
<td colspan="5">
<input type="submit" name="action" value="Add" />
<input type="submit" name="action" value="Edit" />
<input type="submit" name="action" value="Delete" />
<input type="submit" name="action" value=Refresh />
</td>
</tr>
</table>
I am getting an error after clicking the/add/edit/delete button
Warning: StandardWrapperValve[StudentServlet]: Servlet.service() for servlet StudentServlet threw exception
java.lang.NumberFormatException: For input string: " "
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.lang.Integer.parseInt(Integer.java:569)
at java.lang.Integer.parseInt(Integer.java:615)
at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
at com.joseph.controller.StudentServlet.doPost(StudentServlet.java:99)
That demo looks way too complicated for the task at hand. There's really no need to work with class references. You could simplify your approach by doing the following:
HTML:
<h1>Student Info:</h1>
<form class="data-form">
<label>Student ID
<input type="text" />
</label>
<label>First Name
<input type="text" />
</label>
<label>Last Name
<input type="text" />
</label>
<label>Year Level
<input type="text" />
</label>
</form>
<table class="data-table" id="test">
<thead>
<tr>
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Year Level</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Frank</td>
<td>Sinatra</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>Miles</td>
<td>Davis</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Waits</td>
<td>6</td>
</tr>
</table>
JS:
$(document).ready(function () {
$("td", this).on("click", function () {
var tds = $(this).parents("tr").find("td");
$.each(tds, function (i, v) {
$($(".data-form input")[i]).val($(v).text());
});
});
});
The only condition for this to work is that the input order in the form needs to match the column order in the table. Here's a working JSFiddle for reference.
YOUR Form (data-form)tag includes your edit/delete/ update inputs.Keep that out of your form tag.Then the java.lang.NumberFormatException: For input string: " will not take place.See if it works.
I tried adding the code further as mentioned above.It did not worked well.I am facing same dilemma.Anyone plz tell where is it going wrong?
<script>
$(function()
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
}
</script>
Try adding this to the on.cick function
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
I am a newb to js and I have prepared a form using angular JS an JQuery.The code is as follows:
<form id="frm1" onsubmit="return null()">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" ng-model="fname" name="fname" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" ng-model="Lname" required></td>
</tr>
<tr>
<td>Email ID:</td>
<td><input type="email" ng-model="mailid" required></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" ng-model="pass" required></td><br/>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" ng-model="Cpass" required></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" ng-model="Cpass" required></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea ng-model="address" required></textarea></td>
</tr>
<tr>
<td><input type="button" value="reset" onclick="formReset()"></td>
<td><input type="button" value="submit"></td>
<td><input type="button" value="Close" onclick="formClose()"></td>
</tr>
</table>
</form>
And the Script fot the above form is as follows:
<script type="text/javascript">
$(document).ready(function(){
$('a.button-submit').click(function() {
$("#magic").show();
});
});
function formReset()
{
document.getElementById("frm1").reset();
}
function formClose()
{
$("#magic").hide();
}
function null()
{
var x=document.forms["frm1"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
The Reset and the close button work absolutely fine but he problem is that the Submit button validation is not working properly. Right now I am just trying to validate the fname field and it is not working for me. I cannot figure out the exact reason for this. Can anyone please try and help me to get past this problem.
List of problems with the code.
Never name a variable or a function with a javascript keyword. In this case null
For onsubmit event to work, submit button's type should be submit not button.
You already have required field in fname field and you are still trying to validate it.
Dude, Use Validate Plugin for Validation
Example:
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
}
}
});
Validate Plugin
Please can I ask for help with my form. I am wanting to make both the text fields and check box required fields. The check box is validating, all I need now is for the text fields to require validation. I'm using javascript.
HTML:
<form name="form" method="post" action="result.php" onSubmit="return checkme()">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>Name: </td>
<td> <input name="Name" type="text" id="Name" size="20"></td>
</tr>
<tr>
<td>Email: </td>
<td> <input name="Email" type="text" id="Email" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="checkbox" name="agree" value="agree_terms"> I agree to the terms</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Clear"></td>
</tr>
</table>
</form>
Javascript:
<script language="JavaScript" type="text/JavaScript">
<!--//hide script
function checkme() {
missinginfo = "";
if (!document.form.agree.checked) {
missinginfo += "\n - You must agree to the terms";
}
if (missinginfo != "") {
missinginfo ="__________________________________\n" +
"Required information is missing: \n" +
missinginfo + "\n__________________________________" +
"\nPlease complete and resubmit.";
alert(missinginfo);
return false;
}
else {
return true;
}
}
</script>
Add this JS code for validating the text field
if(document.form.Name.value==""){
missinginfo += "Required field";
}
Same for e-mail field also.
If you convert you doctype to <!DOCTYPE html> then you can use
required="true"
It will be implemented as follow
<input name="Name" type="text" id="Name" size="20" required="true">
Most browsers support HTML5. Alternatively make use of jQuery validation which is fairly simple to use.
I have a simple form validation script:
<script language=”javascript”>
function return validate_form(register)
{
if (""==document.forms.register.FNAME.value){
alert("This field is required!");
document.forms.register.FNAME.focus();
return false;
}
if (""==document.forms.register.LNAME.value){
alert("This field is required!");
document.forms.register.LNAME.focus();
return false;
}
if (EMAIL.value.search( /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*#[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/ ) == -1){
alert(“Wrong email”);
return false;
}
if('0'==document.forms.register.GENDER.value){
alert("You must select an option!");
document.forms.register.GENDER.focus();
return false;
}
if (""==document.forms.register.ADDRESS.value){
alert("This field is required!");
document.forms.register.ADDRESS.focus();
return false;
}
if (""==document.forms.register.CONTACTNO.value){
alert("This field is required!");
document.forms.register.CONTACTNO.focus();
return false;
}
}
</script>
the function is called using the onSubmit handler, but nothing happens when submit is clicked. It goes directly to the PHP script instead of javascript 'intercepting' it. Any thoughts?
Form HTML:
<form name="register" action="register.php" method="POST" onsubmit="return validate_form(register);">
<table width="100%" border="0">
<tr>
<td width="46%" height="24" align="right">First Name:</td>
<td width="54%"><input name="FNAME" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Last Name:</td>
<td><input name="LNAME" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Email Address</td>
<td><input name="EMAIL" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Gender:</td>
<td><select name="GENDER">
<option value="" selected="selected">- Select One -</option>
<option value="Male">Male</option>
<option value="Female">Female</option></select></td>
</tr>
<tr>
<td height="24" align="right">Address:</td>
<td><input name="ADDRESS" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Contact No.:</td>
<td><input name="CONTACTNO" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Password</td>
<td><input name="PASSWORD" type="password" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Re-type Password</td>
<td><input name="PASSWORD2" type="password" size"20" /></td>
</tr>
<tr>
<td> </td>
<td><input name="submit" type="submit" value="Register" /></td>
</tr>
</table>
</form>
the alert message doesn't show? what is wrong??
Well, I refactored your code a bit to make more sense and maintainability
html change:
<form name="register" action="register.php" method="POST" onsubmit="return validate_form();">
Sample JS:
function validate_form() {
var frm = document.forms.register;
function focus_and_false(el) {
el.focus();
return false;
}
if( frm.FNAME.value === "" ) { /* repeat this for all form elements you want to validate */
alert("This field is required!");
return focus_and_false(frm.FNAME); /* this is not the best, but i'm showing you how you can reduce overall code by not rewriting the same things. */
}
return true;
}
and here is a sample
You have a HUGE syntax error in your javascript ...
function return validate_form(register)
should be
function validate_form(register)
Maybe you can start with that :)
And add an alert just after the function starts so you know that when you call it, it actually executes or at least tries to.
Another syntax error:
<script language=”javascript”>
Should be
<script type="text/javascript">
And finally i would change the function name to
function validateForm(register)
Let me know if it works :)
You got curly quotes in your code
alert(“Wrong email”); <---bad quotes
You should not just use a name
onsubmit="return validate_form(register);"
pass in this which points to the current scope which is the form element.
onsubmit="return validate_form(this);"
What is EMAIL?
EMAIL.value
Do not just reference element names.