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.
Related
I have a website http://www.yaseennikah.com/MyRegister.php. I need to validate the form on the client side. I used javascript code, but it is not working in some mobile browsers. I saw a jquery code here http://jsfiddle.net/WF2J9/16/. But I don't know to add jquery ul. So can any one complete the code please.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>form validation</title>
</head>
<body>
<form action="page1.php" method="post" class="a">
Name : <input type="text" class="text" name="name" id="name" /> <br/>
Address : <input type="text" class="text" name="address" id="address /><br/>
email : <input type="text" class="text" name="email" id="email" /> <br/>
<button id="submit" name="submit">submit</button>
</form>
<script>
$('#submit').on('click', function() {
valid = true;
if (valid && $('#name').val() == '') {
alert ("please enter your name");
valid = false;
}
if (valid && $('#address').val() == '') {
alert ("please enter your address");
valid = false;
}
return valid;
});
</script>
</body>
</html>
You can add jQuery to your web page using their official CDNs Add this to the head of your web page <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
And you can test if jQuery was loaded correctly using this code
if($) {
alert("jQuery loaded");
} else {
alert("jQuery not loaded");
}
Edit:
Here is my version of the validation script (now should be working) and don't forget to remove the trim() function if you don't want it.
Edit 2:
If you want to do this without jQuery, you can use html's automatic form validation example. But this is not supported in ie 9 and earlier.
Or you can try this (Rewritten jQuery code from above to pure js and a second way of form validation).
Validate the form on server's side too !!!
I've created a form that goes something like this:
<form action="#" class="header_form clearfix">
<input type="text" placeholder="Enter Your Address" id="autocomplete">
Enter Your Address
</form>
I want to place a Javascript condition to check if the text input has text in it before the button would have the onclick parameters. If it has no text on keyup, the onclick is not on button. How to do so?
If you are using jQuery, you could do something like this:
$('.btn').on('click', function() {
var email = $.trim( $('#autocomplete').val() );
if(email.length) {
window.location = '/address?address='+email;
} else {
alert('Enter your email first');
}
});
$.trim is there to at least prevent empty spaces triggering a valid submit.
In any case you'd better go with an EMAIL regex pattern: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
This will disable the link if its not a valid email address too
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
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]{2,}))$/;
return re.test(email);
}
$( document ).ready(function() {
$('#autocomplete').bind('input', function() {
if ($(this).val().trim().length === 0) {
document.getElementById('myButton').removeAttribute('href');
} else {
if (validateEmail(document.getElementById("autocomplete").value) === true) {
document.getElementById('myButton').setAttribute("href",'/address?address=' + document.getElementById("autocomplete").value);
} else {
document.getElementById('myButton').removeAttribute('href');
}
}
});
document.getElementById('myButton').removeAttribute('href');
});
</script>
<form action="#" class="header_form clearfix">
<input type="text" placeholder="Enter Your Address" id="autocomplete" />
Enter Your Address
</form>
</body>
</html>
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
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.
The text box should accept onli decimal values in javascript. Not any other special characters. It should not accept "." more than once. For ex. it should not accept 6.....12
Can anybody help???
You can use regex:
function IsDecimal(str)
{
mystring = str;
if (mystring.match(/^\d+\.\d{2}$/ ) ) {
alert("match");
}
else
{
alert("not a match");
}
}
http://www.eggheadcafe.com/community/aspnet/3/81089/numaric-validation.aspx
You can use Regex.test method:
if (/\d+(\.\d{1,2})/.test(myTextboxValue)) //OK...
JQuery Mask plug in is the way to go!
http://www.meiocodigo.com/projects/meiomask/#mm_demos
If you mean you do not want anything but an integer or a decimal to be typed into the field, you'll need to look at the value
as each key is pressed. To catch pasted input, check it again onchange.
textbox.onkeyup=textbox.onchange=function(e){
e= window.event? event.srcElement: e.target;
var v= e.value;
while(v && parseFloat(v)!= v) v= v.slice(0, -1);
e.value= v;
}
probably you want to validate a form input before sending it to the server. Here is some example:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate(){
var field = document.getElementById("number");
if(field.value.match(/^\d+(\.\d*)?$/)){
return true;
} else {
alert("Not a number! : "+field.value);
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return validate();">
<input type="text" id="number" width="15" /><br />
<input type="submit" value="send" />
</form>
</body>
</html>
I just whipped this up. Useful?
<html>
<head>
<script type="text/javascript">
function validNum(theField) {
val = theField.value;
var flt = parseFloat(val);
document.getElementById(theField.name+'Error').innerHTML=(val == "" || Number(val)==flt)?"":val + ' is not a valid (decimal) number';
}
window.onload=function(){
validNum(document.getElementById('num'));
}
</script>
</head>
<body>
<form>
<input type="text" name="num" id="num"
onkeyup="return validNum(this)" /> <span id="numError"></span>
</form>
</body>
</html>