javascript form validations - javascript

I am using javascript validations for required field. Here is my html
<form class="uk-form-stacked" name="myForm" action="<?php echo base_url(); ?>admin/pages/create_service" id="wizard_advanced_form" method="post" enctype="multipart/form-data" onsubmit="return myFunction(this)" novalidate>
<div data-uk-grid-margin="" class="uk-grid">
<div class="uk-width-medium-1-2">
<label for="service_title">Service Title<span class="req">*</span></label>
<input type="text" name="service_title" id="validd" class="md-input" />
<p id="demo"></p>
</div>
</div>
<div class="uk-grid">
<button type="submit" class="md-btn md-btn-primary md-btn-wave-light waves-effect waves-button waves-light" >Submit</button>
</div>
</form>
my javascript is
<script>
function myFunction(form) {
var x, text;
x = document.getElementById("validd").value;
if (x == null || x == "") {
text = "Input not valid";
}
document.getElementById("demo").innerHTML = text;
return false;
}
</script>
Now when my input field is empty and i submit form it shows me input not valid that is fine. but even when i fill some textin input then it shows me undefined in place of input not valid instead of submitting form.
please help..

You forgot to add an else where it would return true if the condition is not satisfied.
<script>
function myFunction(form) {
var x, text;
x = document.getElementById("validd").value;
if (x == null || x == "") {
text = "Input not valid";
document.getElementById("demo").innerHTML = text;
return false;
}
else{
return true;
}
}
</script>

You can use instead:
<html>
<head>
<script>
function valid()
{
var x;
x=document.getElementById(validd).value;
if(x==null || x=="")
{
alert("Please input service title");
document.getElementById(validd).focus();
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return valid()">
<input type="text" name="service_title" id="validd"/>
<button type="submit">Submit</button>
</form>
</body>
</html>`

Related

JSP page's form not validating data with my Javascript

Issue
The problem is, that my JSP sends the form to my Servlet, without validating it with Javascript.
Javascript
function testInputText() {
var x, text;
x = document.getElementById("inputText").value;
if (typeof x != "string") {
text = "Invalid input JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else if(x ==""){
text = "No input found JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else {text = "Valid JS";
document.getElementById("scriptError").innerHTML = text;
return true;
}
}
formular.jsp
<!DOCTYPE html>
<html>
<head>
<script src="Javascripts/mailValidation.js"></script>
<title>Formular</title>
</head>
<body>
<form name="formular" onsubmit="return testInputText()" method="post"
action="/formSend" >
<fieldset>
<legend class="legendPersonal">Personal Information</legend>
<br>
<p class="formDescription"> fname: </p>
<p class="falseInput"> ${fnameF}</p>
<p id="sriptError"></p>
<input type="text" id="inputText" name="fname" value=${fname} >
<br>
<input type="submit" value="Send" >
</form>
</body>
</html>
My file formular.jsp is in a resource directory called "web". My javascript file in a subdirectory called "Javascripts" under "web" as well.
Denis you are trying to access scriptErrorwhereas you have not added the id into JSP page named with scripts.i think it was by mistake add as sriptError.
Updated JSP code :
<!DOCTYPE html>
<html>
<head>
<script src="Javascripts/mailValidation.js"></script>
<title>Formular</title>
</head>
<body>
<form name="formular" onsubmit="return testInputText()" method="post"
action="/formSend" >
<fieldset>
<legend class="legendPersonal">Personal Information</legend>
<br>
<p class="formDescription"> fname: </p>
<p class="falseInput"> ${fnameF}</p>
<p id="scriptError"></p>
<input type="text" id="inputText" name="fname" value=${fname} >
<br>
<input type="submit" value="Send" >
</form>
</body>
</html>
JS :
function testInputText() {
var x, text;
x = document.getElementById("inputText").value;
if (typeof x != "string") {
text = "Invalid input JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else if(x ==""){
text = "No input found JS";
document.getElementById("scriptError").innerHTML = text;
return false;
} else {text = "Valid JS";
document.getElementById("scriptError").innerHTML = text;
return true;
}
}
Good luck and let me know for any other help.

Form Validationn

I'm trying to create a simple form validation from an user input box. I'm trying to create an alert if the user does not enter anything into the text box. Here is the HTML:
<div id="block3">
<input type="text" name="form" id="FAQS_list"
placeholder="Enter Number Here"/>
<button value="Click" onclick="listFAQS()" onSubmit="return validateForm()">
Click
</button>
<script src="expExternal.js" type="text/javascript"></script>
</div>
Here is the Javascript:
function validateForm() {
var y = document.getElementById("form").value;
if (y == "") {
alert("Please enter a number!");
return false;
}
}
I can't tell what I'm doing wrong here, but when the text box is left empty, there is no alert pop-up. Any help would be appreciated!
Do this change:
var y = document.getElementById("FAQS_list").value;
The id of your input is FAQS_list and not name.
function validateForm() {
var y = document.getElementById("FAQS_list").value;
if (y == "") {
alert("Please enter a number!");
return false;
}
}
<div id="block3"><br/><br/>
<p id="p01">
Enter a number (up to 3):
<input type="text" name="form" id="FAQS_list" placeholder="Enter Number Here" />, and
<button value="Click" onclick="validateForm()" onSubmit="return validateForm()">Click</button> to see that many Frequently Asked Questions.<br/><br/><br/></p>
<p id="FAQS"></p>
<script src="expExternal.js" type="text/javascript"></script>
</div>

form onsubmit doesnt work properly

So I have a login form im making, and I want to test if the inputs are empty or not.
I don't get an error, but when i submit it just ignores the onsubmit.
help?
this is my form:
<form onsubmit="return ifEmpty();" action="login1.php" method="post" id="loginform" accept-charset="UTF-8">
<div style="vertical-align: top;" dir="rtl">
<label dir="rtl" class="labels">שם משתמש/אימייל</label>
<br>
<br>
<input name="unameemail" id="username" type="text">
</div>
<div style="display: block;vertical-align:top;" dir="rtl">
<br>
<label dir="rtl" class="labels">סיסמה</label>
<br>
<br>
<input name="password" id="passwordin" type="password">
</div>
<div>
<br>
<br>
<br>
<input class="btn" type="submit" name="submitone" onclick="" value="login">
</div>
</form>
</div>
and my js:
<script type="text/javascript">
function ifEmpty() {
if (document.getElementById("username") == "") {
document.getElementById("username").style.backgroundColor = "red";
document.getElementById("username").style.color = "white";
document.getElementById("username").className += " invalidform";
return false;
} else if (document.getElementById("passwordin") == "") {
document.getElementById("username").style.backgroundColor = "white";
document.getElementById("username").style.color = "black";
document.getElementById("password").style.backgroundColor = "red";
document.getElementById("password").style.color = "white";
document.getElementById("password").className += " invalidform";
return false;
}
}
</script>
if (document.getElementById("username") == "") {
You are comparing DOM elements to strings here ;-)
You need to access the value property of the input elements.
Change:
if (document.getElementById("username") == "") {
to this:
if (document.getElementById("username").value == "") {

Form validation with Javascript - Field value must be between 2 specific numbers

I have a form on a page. On the form there is a field named Birthyear. I need to figure out the following in javascript:
When a value between 1900-2012 is entered into the field, the form are accepted. If value is not between 1900-2012, the Birthyear text box background color turn yellow.
Does anyone know how to achieve this?
My HTML is as follow:
</head><body>
<div id="div1">
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
Username: <input type="text" id="username" name="username"><br>
Birth Year: <input type="text" id="birthYear" name="birthYear"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<div id="div2">
<img src="cat.jpg" id="im1" name="image1"/>
<img src="dog.jpg" id="im2" name="image2"/>
<img src="fish.jpg" id="im3" name="image3" class='double'/>
</div>
</body></html>
My JS is as follow:
document.getElementById("username").focus();
function validateForm(){
var x=document.forms["myForm"]["username"].value;
if (x==""){
alert("Username Required!");
document.getElementById("username").focus();
}
var dob = document.forms["myForm"]["birthYear"];
var y = dob.value;
if(isNaN(dob)){
alert('must be a number');
dob.select();
return false;
}
}
function validateForm(){
var x=document.forms["myForm"]["username"].value;
if (x==""){
alert("Username Required!");
document.getElementById("username").focus();
}
var dob = document.forms["myForm"]["birthYear"];
var y = dob.value;
if(!isNaN(y)){
if(y>=1900 && y<=2012) {
//Correct
} else {
//Wrong
document.getElementById("birthYear").style.background= "yellow";
document.getElementById("birthYear").focus();
return false;
}
} else {
alert('must be a number');
}
}

Why does onsubmit function seem not to execute?

I cannot figure out what I'm doing wrong. validateForm() does not seem to execute from an onsubmit. Here is validateForm()
function validateForm() {
var amt = IsNumeric(document.forms["InvGenPay"]["Amount"].value);
alert(amt);
if (amt == false)
{
alert("placeholder to avoid scrolling.");
return false;
}
else
{
return true;
}
}
function IsNumeric(strString)
{
// check for valid numeric strings
var strValidChars = "0123456789.";
var strChar;
var blnResult = true;
if (strString.length == 0) return false;
// test strString consists of valid characters listed above
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
if (0 > parseFloat(strString))
{
return false;
}
else
{
return blnResult;
}
}
Here is the form with onsubmit:
<script type="text/javascript" language="JavaScript1.2">
document.write('<form name="InvGenPayDonation" action="'+PostURL+'" onsubmit="return validateForm();" method="POST">');
</script>
<input type='text' name='DonationAmount' value="0.00">
In honor of <span style="color: #FF0000"><br />
<input type='text' name='TransDesc' id='TransDesc' value="" >
<input type="submit" value="Next">
</form>
Your biggest issue is that you don't have the right form name (or the right field name for that matter) in your validation code.
var amt = IsNumeric(document.forms["InvGenPay"]["Amount"].value);
vs
'<form name="InvGenPayDonation" action="'+PostURL+'"
Full, working code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Sampe file</title>
<script>
function validateForm() {
// Badly named variable, since this is actually a boolean of 'IsNumeric'
var amt = IsNumeric(document.forms["InvGenPayDonation"]["DonationAmount"].value);
// Can be simplified as simply:
//return amt;
alert('Amt = ' + amt);
if (!amt)
{
alert("placeholder to avoid scrolling.");
return false;
}
else
{
return true;
}
}
function IsNumeric(n) {
// Shamelessly stolen from:
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<body>
<form name="InvGenPayDonation" action="#"
onsubmit="return validateForm();"
method=POST>
<input type='text' name='DonationAmount' value="0.00">
In honor of <span style="color: #FF0000"><br />
<input type='text' name='TransDesc' id='TransDesc' value="" >
<input type="submit" value="Next">
<script>
// Assigned for testing purposes
var PostURL = "#"
document.forms.InvGenPayDonation.action = PostURL;
</script>
</form>
</body>
</html>
You cannot have un-escaped newlines in a JavaScript string. Check your JavaScript console, you are probably getting a syntax error. That error is why the onsubmit is not running.
Also, as suggested, do not use document.write, just write the form normally in HTML, and use JavaScript to add just the POST url.
<form name="InvGenPayDonation" onsubmit="return validateForm();" method="POST">
<input type='text' name='DonationAmount' value="0.00">
In honor of <span style="color: #FF0000"><br />
<input type='text' name='TransDesc' id='TransDesc' value="" >
<input type="submit" value="Next">
</form>
<script type="text/javascript">
document.forms.InvGenPayDonation.action = PostURL;
</script>
P.S. As Jeremy J Starcher pointed out, your form name is wrong inside validateForm.

Categories

Resources