<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="form.php">
Price : From
<input type="text" id="price-from">
To:
<input type="text" id="price-to">
<input type="submit">
</form>
</body>
</html>
I want to validate price range ..Price From must be less than Price To.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="form.php" onsubmit="return validate()">
Price : From
<input type="text" id="price-from">
To:
<input type="text" id="price-to">
<input type="submit">
</form>
</body>
<script>
var validate=function(){
var from=document.getElementById("price-from").value;
var to=document.getElementById("price-to").value;
if(from<to)
return true;
alert("from>=to");
return false;
}
</script>
</html>
call this method on submit
function validatePrices()
{
var priceFrom = parseFloat( $( "#price-from" ).val() );
var priceTo = parseFloat( $( "#price-to" ).val() );
if ( !isNaN( priceFrom ) && !isNaN( priceTo) )
{
if ( priceFrom >= priceTo )//if greater than or equal to then show error alert
{
alert( "price from should be less than price to" );
return false;
}
}
else
{
alert( "price from and price to should be valid numbers " );
return false;
}
}
You may want to give an id to your submit button.
$(functoin() {
var fromPrice = $("#price-from").val();
var toPrice = $("#price-to").val();
if (fromPrice != "" && toPrice != "") {
if (parseFloat(toPrice) > parseFloat(fromPrice) {
$("#frmPrice").submit()
}
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="form.php" id='frmPrice'>
Price : From
<input type="text" id="price-from">To:
<input type="text" id="price-to">
<input type="submit" id="btnSubmit">
</form>
</body>
</html>
Related
I am creating a date input and I want an error alert if the date input is left blank.
currently I have and it doesnt work:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function validateDate(value) {
var a = document.getElementById("date").value;
if (a = = = "") {
window.alert("Error");
return false;
}
}
</script>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type=“date” id=“date” name=“date”><br>
<button id=teeTime onClick="validateDate()">Submit</button><br>
</div>
</form>
</body>
</html>
Do not put spaces in your operators, use === not = = =, a better use to say if a !== "" if a is NOT an empty string
Try this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type="date" id="date" name="date" /><br />
<button id="teeTime">Submit</button><br />
</div>
</form>
<script type="text/javascript">
var button = document.getElementById("teeTime");
function validateDate(value) {
if (value === "") {
window.alert("Error");
return false;
}
}
button.addEventListener("click", function (e) {
var value = document.getElementById("date").value;
validateDate(value);
});
</script>
</body>
</html>
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
I have some fields (created dynamically) in a page and I am trying to each element on form submit .Bellow code is sample ,only txtAge field validate, txtName not validating .Is there any option to validate each field with bellow code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
function txtName_FormValidation() {
document.getElementById('entryForm').onsubmit = function (e) {
if (document.getElementById('txtName').value.length <= 0) {
alert(1)
document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
return false;
};
}
}
function txtAge_FormValidation() {
document.getElementById('entryForm').onsubmit = function (e) {
if (document.getElementById('txtAge').value.length <= 0) {
alert(2)
document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
return false;
};
}
}
</script>
</head>
<body onload="txtName_FormValidation(); txtAge_FormValidation()">
<form id="entryForm">
<input type="text" id="txtName" />
<span id="span_txtName"></span>
<br />
<input type="text" id="txtAge" />
<span id="span_txtAge"></span>
<br />
<button type="submit" value="Sebmit">Submit</button>
</form>
</body>
</html>
Why don't you do like this?
calling all validations from same function?
<script>
document.getElementById('entryForm').onsubmit = function(e){
txtName_FormValidation(e);
txtAge_FormValidation(e);
}
function txtName_FormValidation(e) {
if (document.getElementById('txtName').value.length <= 0) {
alert(1)
document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
return false;
};
}
function txtAge_FormValidation(e) {
if (document.getElementById('txtAge').value.length <= 0) {
alert(2)
document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
return false;
};
}
</script>
You are replacing the first onsubmit event, for this reason only dispatch the second function.
You can try this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('entryForm').onsubmit = function (e) {
e.preventDefault();
if (document.getElementById('txtName').value.length <= 0) {
alert(1)
document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
};
if (document.getElementById('txtAge').value.length <= 0) {
alert(2)
document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
};
}
}, false);
</script>
</head>
<body >
<form id="entryForm">
<input type="text" id="txtName" />
<span id="span_txtName"></span>
<br />
<input type="text" id="txtAge" />
<span id="span_txtAge"></span>
<br />
<button type="submit" value="Sebmit">Submit</button>
</form>
</body>
</html>
I am trying to create a form which will ask a sure to input name, GPA and phone number. I need help to validate the GPA to be a number between 0 and 4 inclusive, including at most two decimal values after the grade.
I cannot figure where to start!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function enter()
{
var grade = document.getElementById("gpa").value;
if (grade >= 0 && grade <= 4)
{
alert("success");
}
}
</script>
</head>
<body>
<form id= "survey" name="survey">
Name:
<input type="text" name="fullname"/><br>
GPA:
<input type="text" id="gpa" name="gpa" maxlength="4"/><br><br>
<input type="submit" onclick="enter()"/>
</form>
</body>
</html>
Try something like this, its written with just javascript and html.
window.verify = function() {
var gpa = document.getElementById("gpa").value;
var ver = parseFloat(gpa);
alert(ver >= 0 && ver <= 4);
}
<input type="text" id="gpa" />
<br>
<br>
<button type="submit" onclick="verify()">Check GPA
In the codes below, both functions and callings are quite similar.
Why is it that the JavaScript validation alert works in the code below:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
return( true );
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
but doesn't work in this one:
<!DOCTYPE html>
<html>
<head>
<title> Untitled</title>
<script type='text/javascript'>
}
function validate()
{
if( document.myForm.firstname.value == "" )
{
alert( "Please provide your first name!" );
document.myForm.firstname.focus() ;
return false;
}
return( true );
}
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<h1> Truth </h1>
<label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
<input type="submit" value="Submit"/> <br>
</form>
</body>
</html>
Probably because you've got a leading '}' in the code in the second example.
<script type='text/javascript'>
} // <- this is going to cause a syntax error
function validate()
{
if( document.myForm.firstname.value == "" )
{
alert( "Please provide your first name!" );
document.myForm.firstname.focus() ;
return false;
}
return( true );
}
</script>
Try fixing that and see if it works. If you're running things in a browser, check the JavaScript console for errors.