javascript form validation is not working in IE8 - javascript

This javascript form validation is not working in IE8 !!
the form submits while the user inters invalid inputs.
it is working properly in other browsers firefox ,opera, chrome.
can you help me please?
<form method="post" name="form1" id="form1" action="editAction.php" onsubmit="return check_user_info()">
===============================
<script type="text/javascript">
function check_user_info()
{
var proceed = true;
if (checkUserFirstName() == 1)
{
document.getElementById("userFname_msg").style.display = "block";
document.getElementById("userFname_msg1").style.display = "none";
proceed = false;
}
else if (checkUserFirstName() == 11)
{
document.getElementById("userFname_msg1").style.display = "block";
document.getElementById("userFname_msg").style.display = "none";
proceed = false;
}
else
{
document.getElementById("userFname_msg").style.display = "none";
document.getElementById("userFname_msg1").style.display = "none";
}
//-----------------------------
if (checkUserLastName() == 1)
{document.getElementById("userLname_msg").style.display = "block";
document.getElementById("userLname_msg1").style.display = "none";
proceed = false;}
else if (checkUserLastName() == 11)
{document.getElementById("userLname_msg1").style.display = "block";
document.getElementById("userLname_msg").style.display = "none";
proceed = false;}
else{document.getElementById("userLname_msg").style.display = "none";
document.getElementById("userLname_msg1").style.display = "none";
}
//-----------------------------
if (checkMobile() == 1)
{
document.getElementById("mobile_msg").style.display = "block";
proceed = false;
}
else
document.getElementById("mobile_msg").style.display = "none";
//----------------------------------
if (checkPhone() == 1)
{
document.getElementById("phone_msg").style.display = "block";
proceed = false;
}
else
document.getElementById("phone_msg").style.display = "none";
//----------------------------
if (proceed)
{
alert ("your information has been updated successfully ..");
return proceed;
}
else
{
return false;
}
} // End function ...
//----------------------------------------------------
function checkUserFirstName()
{
if (document.getElementById("firstName").value.trim().length == 0)
return 1 ;
else if (!(document.getElementById("firstName").value.match(/^[ \.\-_a-zA-Z]+$/)))
return 11 ;
} // End function ...
//--------------------------------------------------
function checkUserLastName()
{
if (document.getElementById("lastName").value.trim().length == 0)
return 1 ;
else if (!document.getElementById("lastName").value.match(/^[ \.\-_a-zA-Z]+$/))
return 11 ;
} // End function ...
//-------------------------------------------------------------
function checkMobile()
{
if (((document.getElementById("mobile").value.trim().length >0) && (document.getElementById("mobile").value.trim().length != 10))|| (isNaN(document.getElementById("mobile").value)))
return 1 ;
} // end function ...
//----------------------------------------------------------
function checkPhone()
{
if(!document.getElementById("TelephoneNumber").value.match(/^[ \/0-9]*$/))
return 1 ;
} // end function ...
</script>

I'm guessing the problem is probably because of the .trim() method on the strings in your check functions. There isn't a String trim method in older browsers, you'd have to use a polyfill to make sure it's always available, no matter the browser. A good example is:
Trim string in JavaScript?
"".trim || String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
is what I use.

Related

How to check if switch is true or not to hide the div?

I have some problem when I check the function validation, I need when checking all the cassis is true hide the parent div * errors message *
var error_pass = false;
$('#pass').focusout(function(){
check_pass();
error_pass = false;
if(error_pass !== true){
console.log('its showing!');
}else{
$('.test').fadeOut('522');
}
});
function check_pass() {
var fpass= $('#pass').val();
switch(error_pass = true){
case(fpass.length < 6 ? $('#pass-error-message3').css('color','red'):$('#pass-error-message3').css('color','green') ):
$('#pass-error-message3').show();
case(fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1 ? $('#pass-error-message4').css('color','red') : $('#pass-error-message4').css('color','green')):
$('#pass-error-message4').show();
case(fpass.search(/\d/) == -1 ? $('#pass-error-message2').css('color','red'):$('#pass-error-message2').css('color','green')):
$('#pass-error-message2').show();
default:break;
}
}
Use if else statements like this
function validation() {
var error = false;
if (fpass.length < 6) {
error = true;
$('#pass-error-message3').css('color', 'red').show();
} else {
$('#pass-error-message3').css('color', 'green');
}
if (fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1) {
error = true;
$('#pass-error-message4').css('color', 'red').show();
} else {
$('#pass-error-message4').css('color', 'green')
}
if(fpass.search(/\d/) == -1){
error = true;
$('#pass-error-message2').css('color','red').show();
}else{
$('#pass-error-message2').css('color','green');
}
if(error === false){
hideParentDiv(); // Here hide the div
}
}
Much cleaner approach

Hiding elements of HTML in android internet browser

I am working on a test project targeting android internet browser. I am hiding some object onLoad using javascript.
The problem is, that it is working in mozilla firefox but not working in android default internet browser.
Here is my full code:
<!DOCTYPE html>
<html>
<script type="text/javascript" async>
function ajaxpath_59c479660b217(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_59c479660b217"></div>');fcs_59c479660b217=document.createElement('script');fcs_59c479660b217.type="text/javascript";fcs_59c479660b217.src=ajaxpath_59c479660b217((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=59c479660b217&s=#!59c479660b217");setTimeout("document.getElementById('fcs_div_59c479660b217').appendChild(fcs_59c479660b217)",1);})();
function myFunction() {
document.getElementById("comment-ad").style.display = "none";
}
function myFunction2() // no ';' here
{
var elem = document.getElementById("fcs_Comment_59c479660b217");
if (elem.value=="Enter your comment here") elem.value = "Enter your post here";
else elem.value = "Enter your post here";
}
function myFunction3() // no ';' here
{
document.getElementById("comment-rss-feed").style.display = "none";
}
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
document.getElementByClassName("ShowButton").innerHTML = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
document.getElementById("ShowButton").innerHTML = "Show filter";
}
}
if (document.readyState === "complete") {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
}
else {
window.onload = function () {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
};
};
</script>
</body>
</html>
I'll put the whole script in domloaded event to be sure that js can find the dom elements. like that:
<script type="text/javascript" async>
document.addEventListener('DOMContentLoaded', function(){
function ajaxpath_59c479660b217(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_59c479660b217"></div>');fcs_59c479660b217=document.createElement('script');fcs_59c479660b217.type="text/javascript";fcs_59c479660b217.src=ajaxpath_59c479660b217((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=59c479660b217&s=#!59c479660b217");setTimeout("document.getElementById('fcs_div_59c479660b217').appendChild(fcs_59c479660b217)",1);})();
function myFunction() {
document.getElementById("comment-ad").style.display = "none";
}
function myFunction2() // no ';' here
{
var elem = document.getElementById("fcs_Comment_59c479660b217");
if (elem.value=="Enter your comment here") elem.value = "Enter your post here";
else elem.value = "Enter your post here";
}
function myFunction3() // no ';' here
{
document.getElementById("comment-rss-feed").style.display = "none";
}
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
document.getElementByClassName("ShowButton").innerHTML = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
document.getElementById("ShowButton").innerHTML = "Show filter";
}
}
if (document.readyState === "complete") {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
}
else {
window.onload = function () {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
};
};
});
</script>

Input button never appears when javascript detects form completed

I'm making a register page using HTML, CSS and JS and Java servlet etc. I have a monitorer() function which checks if the user has finished inputting everything before making the register button visible. But now everything works, but somewhere am getting screwed over and the button never comes back..
my button in reg.html :
<input type="submit" value="Register" class="btnSub" id="btnReg" style="visibility:hidden;"/>
javascript function monitorer()
function monitorer() {
var btnReg = document.getElementById("btnReg");
btnReg.style.visibility = "hidden";
var flag = true;
if (document.getElementById("fname").value.length >= 3) {
if (document.getElementById("lname").value.length >= 3) {
if (valiDate(document.getElementById("dob"))) {
if (document.getElementById("USN").value.length == 10) {
if (document.getElementById("passw").value.length > 5) {
var ticks = document.getElementsByClassName("checker"), i = 0;
for (i = 0; i < ticks.length; i++) {
if (ticks.item(i).innerHTML == "✔") {
alert("i val = " + i);
continue;
} else {
flag = false;
break;
}
}
}
} else {
flag = false;
document.getElementById("USN").focus();
}
} else {
flag = false;
document.getElementById("dob").focus();
}
} else {
flag = false;
document.getElementById("lname").focus();
}
} else {
flag = false;
document.getElementById("fname").focus();
}
if (flag == true) {
btnReg.style.visibility = "visible";
} else if(flag == false) {
btnReg.style.visibility = "hidden";
}}
And to help you get as good a picture as you can, a screenshot
See - all the ticks are there, the first name, last name etc are having value.length >=3 but still the register button doesn't show..
Also, I have put the monitorer() method in every input's "onBlur", "onChange" events.
Here is a link to my html file >>> reg.html
and please let me know if i can improve anything?

Javascript - Toggle Element only works one way! Also help required for URL append

I am trying to use a toggle script to show and hide certain elements of a page... it works fine hiding the Table containing a list of links and showing the Table with the content inside, but using it to reverse this does not work at all!
<script type="text/javascript">
function getElement(iElementId)
{
if (document.all)
{
return document.all[iElementId];
}
if (document.getElementById)
{
return document.getElementById(iElementId);
}
}
function toggleElement(oElement)
{
if (oElement.style.display == "none")
{
oElement.style.display = "inline";
}
else if (oElement.style.display == "inline")
{
oElement.style.display = "none";
}
else
{
oElement.style.display = "none";
}
}
function OpenPage(name) {
// other function not relevant here //
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
function Switchback(){
// document.getElementById(MainTable).style.display = "inline";
// document.getElementById('ContentTable').style.display = "none";
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
</script>
Even just trying a "getElementByID" function doesn't work for the switching back to displaying the main table of links and hiding the content table... Any way to make it work? thanks.
(also, whilst we're at it, what is the best way to append a URL using Javascript/AJAX? as the page is presently forum/index.php but when a link to a forum is clicked I want the URL to append to forum/index.php?f= and then the relevant number)
<script type="text/javascript">
function getElement(iElementId)
{
if (document.all)
{
return document.all[iElementId];
}
if (document.getElementById)
{
return document.getElementById(iElementId);
}
}
function toggleElement(oElement)
{
if (oElement.style.display == "none")
{
oElement.style.display = "inline";
}
else if (oElement.style.display == "inline")
{
oElement.style.display = "none";
}
else
{
oElement.style.display = "none";
}
}
function OpenPage(name) {
// other function not relevant here //
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
function Switchback(){
// document.getElementById(MainTable).style.display = "inline";
// document.getElementById('ContentTable').style.display = "none";
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
</script>

ajax hidding div problem in IE

I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.
If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)
below is my code:
<script type="text/javascript">
var usernameok;
var emailok;
function checksubmit()
{
if (usernameok && emailok) {
document.getElementById("button").disabled = false;
} else {
document.getElementById("button").disabled = true;
}
}
function username(username)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Username Ok") >= 0) {
usernameok = true;
} else {
usernameok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
user_url = "check_username.php?username=" + username.value;
httpxml.open("GET", user_url, true);
httpxml.send(null);
}
function email(email)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
emailok = true;
} else {
emailok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
email_url = "check_email.php?email=" + email.value;
httpxml.open("GET", email_url, true);
httpxml.send(null);
}
</script>
I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.
I see what you're doing now...ok, try this instead:
httpxml.onreadystatechange = function()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
document.getElementById("email").style.backgroundColor = "green";
document.getElementById("email").style.color = "white";
document.getElementById("email_div").style.display = 'none';
emailok = true;
} else {
document.getElementById("email").style.backgroundColor = "red";
document.getElementById("email_div").innerHTML=httpxml.responseText;
emailok = false;
}
checkCanSubmit();
}
};
Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.
Edit:
Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.
Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE:
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/

Categories