In my web-application I have added javascript in a jsp file.
The alert message is popping up in Firefox. But the alert window is not working in IE 8. Following is the javascript that I am using.
Can anyone please tell how to make this work in IE 8?
function doSubmit() {
var checkbox = document.getElementById("terms");
if (!checkbox.checked) {
alert("error message goes here.");
return false;
} else {
return true;
}
}
Works fine, here is how you use it!
<html>
<head>
<script type="text/javascript">
function doSubmit() {
var checkbox = document.getElementById("vehicle");
if (!checkbox.checked) {
alert("error message goes here.");
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form name="frm1" onsubmit=" return doSubmit()">
<input type="checkbox" name="vehicle" value="Bike" />Checked<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
added correction as suggested.
Related
I'm trying to make some code that sends a form that first makes sure if it is filled correctly. When I click on the "enviar formulario" button, it doesn't call the javascript code and does not do anything.
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length() < 2){
alert("Error");
return 1;
}
else if(!document.getElementById("edad").value.isInteger()){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
There is nothing like document.getElementById("nombre").length()
If you are trying to read the length of input text do this
document.getElementById("nombre").value.length
EDIT 1:
There is no method as isInteger(). So use parseInt() instead
This will be your working code
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length < 2){
alert("Error");
return 1;
}
else if(!parseInt(document.getElementById("edad").value)){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
You're comparing the length of the whole input tag rather than the text in it.
if (document.getElementById("nombre").value.length < 2)
{
...
}
if (!document.getElementById("edad").value.isInteger())
{
...
}
and so on...
First, please check if your control is reaching the test method, use a debugger (I prefer chrome)
After that check your syntax in the console, while the code is at the breakpoint
You can share your findings here
I am trying to write a very simple jQuery function which will have two main properties. The first one will be to check if the field is empty or not. The second one will be if the field is not empty to execute a form which will lead to a PHP coded page. I am very new to jQuery and I will be very grateful if someone can point where exactly is my mistake. Thank you in advance.
function Captcha() {
$('#Button').click(function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
}
$(document).ready(function() {
Captcha();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
Don't work with the button's click event, work with the form's submit event because a form can be submitted via the keyboard and therefore the button can be circumvented.
You can see a working version here (Stack Overflow prevents submit code from working in the snippet environment below.)
$(function() {
$('#Alpha').on("submit", function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
You would want to validate the form fields when you actually submit the form. When you click on the button you are still in the process of triggering the submit.
Try changing this:
$('#Button').click(function() {
Into this:
$('#Alpha').on('submit', function() {
See if that helps.
What is wrong with my JavaScript? I want to show a errormessage next to the validate-field, but it doesnt show anything.
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jsformular.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="formBody">
<form name="myform" onsubmit="return validate()" method="post">
<div class="formField">
<div class="formFieldElement">
<label for="firstname">Firstname:*</label>
</div>
<div class="formFieldElement">
<input type="text" name="firstname">
</div>
<div class="formFieldElement formError" id="errorFirstname"></div>
</div>
</form>
</body>
</html>
you lost } in validate function
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
}
it's work
You were missing the close bracket at the end of your function.
function validate() {
if (document.myform.firstname.value == "") {
document.getElementById('errorFirstname').innerHTML = "Error";
return false;
}
}
When I typed nothing in the field and hit the enter key, it showed the error message.
For finding issues like this in future, I would highly recommend using the developer console included with Chrome or Firefox. It immediately flagged the error for me with the following error message:
Uncaught SyntaxError: Unexpected end of input
I have created a form that checks whether or not an email address is valid and outputs VALID or INVALID accordingly. My problem is that it does not work in internet explorer, and this is incredibly frustrating. My code is as follows:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<meta charset=utf-8 />
<title>Email Validation</title>
</head>
<body>
<form onSubmit='validate(); return false;'>
<p>Enter an email address:</p>
<input id='email' placeholder="example#example.com" size="21" />
<button type='submit' id='validate'>Submit</button>
<button type='reset' value='reset'>Reset</button>
</form>
<br/>
<h2 id='result'></h2>
<script>
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/;
return re.test(email);
}
function validate(){
$("#result").text("");
var email = $("#email").val();
if (validateEmail(email)) {
$("#result").text(email + " is valid");
$("#result").css("color", "green");
} else {
$("#result").text(email + " is not valid");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
</script>
</body>
</html>
First your script tag is wrong
<script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
^^^^^^
it is missing the //
You are calling validate in TWO places.
<form onSubmit='validate(); return false;'>
and
$("form").bind("submit", validate);
There should only be one. Get rid on the inline one and stick with the bind one.
Also, older IEs can tend to have an issue with method names and ids being the same. So change the id of the validate button to id="btnValidate" and see if that makes any difference.
I have created an example for you: http://jsfiddle.net/ctw44q9w/
$(document).ready(function(){
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/;
return re.test(email);
}
function validate(email){
$("#result").text("");
if (validateEmail(email)) {
$("#result").text(email + " is valid");
$("#result").css("color", "green");
} else {
$("#result").text(email + " is not valid");
$("#result").css("color", "red");
}
}
$('#validate').on('click', function(){
validate($('#email').val());
});
});
<p>Enter an email address:</p>
<input id='email' placeholder="example#example.com" size="21">
<button type='submit' id='validate'>Submit</button>
<button type='reset' value='reset'>Reset</button>
<br/>
<h2 id='result'></h2>
Also I have removed the onclick() (it´s a bad practice) and I set by on() jquery. It´s very important the jquery version you are using(1.11.2 should be ok), so make sure the one you are using is compatible with IE.
I recomend you use this to get everithing working on the IE
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
Note: Set for the version you need.
I hope it´s helps.
Should I use window.open() inside window.onload function in Javascript? If not how to use that in window.onload="url". Please show me some example. Here below is what am trying to do. The text validation is working fine. Once I enter run string its not going to open the `evovle.jsp (concern url)
e.g.:
<html>
<head>
<script type="text/javascript">
function validatetxtbox()
{ var txtfield;
txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
window.onload=function(){window.open('evolve.jsp''welcome' 'width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes');}
}
else { alert("Try again"); }
}
</script>
</head>
<body>
<input type="text" id="txtbox" maxlength="3">
<input type="button" id="btn" value="Send" onclick="validatetxtbox()">
</body>
</html>
<html>
<head>
<script ="text/javascript">
function check() {
var txtfield; txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
var newwin=window.open('evolve.jsp','welcome','width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes');
newwin.focus();
}
else { alert("Try again"); }
}
</script>
</head>
<body>
Enter a Keayword
<input type="text" id="txtbox" onblur="check()" />
</body>
</html>
Use querystring and check in evolve.jsp
Ex evolve.jsp#alertme