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.
Related
I have my form in Spring MVC into which I need to apply java script validations as well. The code is given below.
function validate_form() {
valid = true;
var fname = document.myform.firstname.value;
if (fname == "") {
document.getElementById('fname_error').innerHTML = "enter the first name";
valid = false;
}
return valid;
}
<html>
<head></head>
<body>
<form:form action="done" method="post" modelAttribute="student" name="myform" onsubmit="return validate_form()">
<p>First name:</p>
<form:input type="text" path="firstname" name="firstname" />
<p id="fname_error"></p>
<input type="submit" value="Sumbit">
</form:form>
</body>
</html>
Here the java script code executes, but the if condition does not executes. Is this problem need to be solved using the controller class? Please help me in this matter.
thank you.
I think you are adding :form there which was not necessary.
Here is the running code:
<html>
<head></head>
<body>
<form action="done" method="post" modelAttribute="student" name="myform" onsubmit="return validate_form()">
<p>First name:</p>
<input type="text" path="firstname" name="firstname" />
<p id="fname_error"></p>
<input type="submit" value="Sumbit" >
</form>
<script type="text/javascript">
function validate_form(){
valid = true;
var fname = document.myform.firstname.value;
if(fname == ""){
document.getElementById('fname_error').innerHTML = "enter the first name";
valid = false;
}
return valid;
}
</script>
</body>
</html>
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>`
How to show text in id="result" When not a invalid email ?
http://jsfiddle.net/d65cdh2v/
When i fill not a valid email EG: xxxxxxx in input name="email"
i want to show text in id="result" EG: xxxxxxx not a valid
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
$("#result").text("");
$("#result").text(x + " not a valid :)");
return false;
}
else {
alert("OK");
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
<h2 id='result'></h2>
</body>
</html>
Your code works perfectly fine, provided you include jQuery: http://jsfiddle.net/d65cdh2v/1/
But I assume you aren't using jQuery, judging by the rest of your code, so to do it with vanilla JavaScript:
document.getElementById('result').innerHTML = x + " not a valid :)";
JSFiddle
getting undefined as a return type for the method validateHallticket please check the code & modify accordingly so, that when i click the submit button i should able to get the appropriate return types.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>4Cubes Site</title>
<script type="text/javascript">
function validateForm(form) {
document.writeln(validateNames(form["firstname"]));
document.writeln(validateHallticket(form["hallticket"])); // getting undefined value
if (validateNames(form["firstname"]) && validateHallticket(form["hallticket"])) {
form.sub`enter code here`mit();
}
else {
alert("Please Fill the required Fields");
}
}
function validateNames(inputField) {
Names_help = document.getElementById('lastname_help');
if (inputField.value.length == 0) {
if (Names_help!= null) {
Names_help.innerHTML = "Please Enter a validate Name";
return false;
}
}
else {
Names_help.innerHTML = "";
return true;
}
}
function validateHallticket(inputField) {
var regex = /^\d{2}K91A\d{4}$/;
var rs = regex.test(inputField.value);
hallticket_help = document.getElementById('hallticket_help');
if (!regex.test(inputField.value)) {
if (hallticket_help != null) {
hallticket_help.innerHTML = "Enter a valid hallticket";
return false;
}
}
else {
hallticket_help.innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<center>
<font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
</center>
<br></br>
<br></br>
<form method="post" action="servlet.do" name="myform">
HallTicket:
<input type="text" name="hallticket" id="hallticket"
onblur="validateHallticket(this)"></input>
<span id="hallticket_help" style="color:Red; font-style:italic;"> </span>
<br></br>
FirstName:
<input type="text" name="firstname" id="firstname"
onblur="validateNames(this)"></input>
<span id="firstname_help" style="color:Red; font-style:italic;"> </span>
<br></br>
LastName:
<input type="text" name="lastname" id="lastname"
onblur="validateNames(this)"></input>
<span id="lastname_help" style="font-style:italic; color:Red;"> </span>
<center>
<input type="button" value="SUBMIT" onclick="validateForm(this.form);"></input>
</center>
</form>
</body>
</html>
This is because, the function loads before the DOM loads. Try moving the <script> tag just before </body> and it works.
Notes
Add return false; when invalid.
Add the handler to the onsubmit event of the <form> tag.
Full Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>4Cubes Site</title>
</head>
<body>
<center>
<font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
</center>
<br></br>
<br></br>
<form method="post" action="servlet.do" name="myform" onsubmit="return false;">
HallTicket:
<input type="text" name="hallticket" id="hallticket"
onblur="validateHallticket(this)"></input>
<span id="hallticket_help" style="color:Red; font-style:italic;"> </span>
<br></br>
FirstName:
<input type="text" name="firstname" id="firstname"
onblur="validateNames(this)"></input>
<span id="firstname_help" style="color:Red; font-style:italic;"> </span>
<br></br>
LastName:
<input type="text" name="lastname" id="lastname"
onblur="validateNames(this)"></input>
<span id="lastname_help" style="font-style:italic; color:Red;"> </span>
<center>
<input type="button" value="SUBMIT" onclick="return validateForm(this.form);"></input>
</center>
</form>
<script type="text/javascript">
function validateForm(form) {
document.writeln(validateNames(form["firstname"]));
document.writeln(validateHallticket(form["hallticket"])); // getting undefined value
if (validateNames(form["firstname"]) && validateHallticket(form["hallticket"])) {
form.submit();
}
else {
alert("Please Fill the required Fields");
}
return false;
}
function validateNames(inputField) {
Names_help = document.getElementById('lastname_help');
if (inputField.value.length == 0) {
if (Names_help!= null) {
Names_help.innerHTML = "Please Enter a validate Name";
return false;
}
}
else {
Names_help.innerHTML = "";
return true;
}
return false;
}
function validateHallticket(inputField) {
var regex = /^\d{2}K91A\d{4}$/;
var rs = regex.test(inputField.value);
hallticket_help = document.getElementById('hallticket_help');
if (!regex.test(inputField.value)) {
if (hallticket_help != null) {
hallticket_help.innerHTML = "Enter a valid hallticket";
return false;
}
}
else {
hallticket_help.innerHTML = "";
return true;
}
return false;
}
</script>
</body>
</html>
Fiddle: http://jsbin.com/apuyaw/1
Put your script tag before ending body tag because you currently dont hav the reference of the element
<body>
<script>
your code in here
</script>
</body>
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.