Javascript Validation not working in IE only

Question

karlcunanan 0 Light Poster

11 Years Ago

Good day Geniuses! I am a beginner and would like to ask for your assistance regarding my Javascript not working ONLY in IE :( I dont know where to start debugging since I only use Chrome and Firefox for testing. Hope someone can help me on this.

Javascript

<script type='text/javascript'>

function formValidator(){
    // Make quick references to our fields
    // Check each input in the order that it appears in the form!
                        if (fname.value === ""){
                        alert("Please Enter your First Name")
                        return false;
                        }
                        if (lname.value == ""){
                        alert("Please Enter your Last Name")
                        return false;
                        }
                        if (demo1.value == ""){
                        alert("Please Enter your Date of Birth")
                        return false;
                        }
                        if (age.value == ""){
                        alert("Please Enter your Age")
                        return false;
                        }
                        if (nationality.value == "Default"){
                        alert("Please choose your Nationality")
                        return false;
                        }
                        if (phone.value == ""){
                        alert("Please Enter your Phone Number")
                        return false;
                        }
                        if (mobile.value == ""){
                        alert("Please Enter your Mobile Number")
                        return false;
                        }
                        if (address.value == ""){
                        alert("Please Enter your Mailing Address")
                        return false;
                        }
                        var email = document.getElementById('email');
                        if(emailValidator(email, "Please enter a valid email address")){
                        if (education.value == "Default"){
                        alert("Please Select Education Level")
                        return false;
                        }
                        if (major.value == ""){
                        alert("Please Enter your Major")
                        return false;
                        }
                        if (college.value == ""){
                        alert("Please Enter your College/University")
                        return false;
                        }
                        if (refname.value == ""){
                        alert("Please your reference name")
                        return false;
                        }
                        if (refphone.value == ""){
                        alert("Please your reference phone number")
                        return false;
                        }
                        if (cv.value == ""){
                        alert("Please attach your CV")
                        return false;
                        }
                        if (photo.value == ""){
                        alert("Please attach your Photo")
                        return false;
                        }
                            if (username.value.length < 6) {
                                alert("Username must be at least 6-8 Characters")
                                return false;
                            }
                            if (password.value.length < 8) {
                                alert("Password must be at least 8 Characters")
                                return false;
                            }
                            if (password2.value!=password.value) {
                                alert("Password is not matched!")
                                return false;
                            }

                            if(notEmpty(subject, "Please put a password")){
                            if(gCategory(category)){
                            return true;

    }

                        }
                        }

    return false;

}


function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}


function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function lengthRestriction(elem, min, max){
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}

function madeSelection(elem, helperMsg){
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function gCategory(category)
{
if(category.value == "Default")
{
alert('Please Select Category');
category.focus();
return false;
}
else
{
return true;
}
}

</script>

Form:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit='return formValidator()' class="appnitro" method="post" 
   enctype="multipart/form-data" name="form1">
   <div class="form_description">
            <h2>Application Form</h2><h4 style="float:right; margin-top:-40px">Required Fields <span>*</span></h4>
        </div>       
   <h3><u>Personal Details</u></h3>      
<p>
          <label class="description">
            First Name<span>*</span>
            <br />
            <input class="element text" type="text" name="fname" id="fname" />
            </label>
            <input name="hiddenField" type="hidden" 
id="hiddenField" value="Job Application form from Al Zubara company 
" />

            <br />
            <label class="description">
            Last Name<span>*</span>
            <br />
            <input class="element text" type="text" name="lname" id="lname" />
            </label>      
            <br />
            <label class="description">
            Passport Number
            <br />
            <input class="element text" type="text" name="passport" id="passport" />
            </label>
            <br />
            <label class="description">
            Date of Birth<span>*</span>
            <br />
            <input id="demo1" type="text" name = "birth" size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
            </label>
            <br />
            <label class="description">
            Age<span>*</span>
            <br />
            <input class="element text" name="age" type="text" id="age" size="4" 
maxlength="3" />
            </label>
            <br />
            <label class="description">
            Nationality<span>*</span>
            <br />
            <select id="nationality" class="element text" name="nationality">
<option style="border:0px"selected="" value="Default">- Select One -</option>
<option value="Afghan">Afghan</option>
<option value="African">African</option>
<option value="Albanian">Albanian </option>
<option value="Algerian">Algerian</option>
<option value="American">American</option>
<option value="Andorran">Andorran</option>
<option value="Angolan">Angolan</option>
<option value="Antarctic">Antarctic</option>
<option value="Antiguan">Antiguan</option>
<option value="Arabian">Arabian</option>
<option value="Argentinean">Argentinean</option>
<option value="Armenian">Armenian</option>
<option value="Australian">Australian</option>
<option value="Austrian">Austrian</option>
<option value="Bahamian">Bahamian</option>
<option value="Bahraini">Bahraini</option>
<option value="Bangladeshi">Bangladeshi</option>
<option value="Barbadian">Barbadian</option>
<option value="Belo Russian">Belo Russian</option>
<option value="Belgian">Belgian</option>
<option value="Belizean">Belizean</option>
<option value="Beninese">Beninese</option>
<option value="Bermudan">Bermudan</option>
<option value="Bhutanese">Bhutanese</option>
<option value="Bolivian">Bolivian</option>
<option value="Bosnian">Bosnian</option>
<option value="Botswanan">Botswanan</option>
<option value="Brazilian">Brazilian</option>
<option value="British">British</option>
<option value="Bruneian">Bruneian</option>
<option value="Bulgarian">Bulgarian</option>
<option value="Burkinese">Burkinese</option>
<option value="Burmese">Burmese</option>
<option value="Burundian">Burundian</option>
<option value="Cambodian">Cambodian</option>
<option value="Cameroonian">Cameroonian</option>
<option value="Canadian">Canadian</option>
<option value="Cape Verdean">Cape Verdean</option>
<option value="Georgian">Georgian</option>
<option value="Chadian">Chadian</option>
<option value="Chilean">Chilean</option>
<option value="Chinese">Chinese</option>
<option value="Columbian">Columbian</option>
<option value="Comoran">Comoran</option>
<option value="Congolese">Congolese</option>
<option value="Costa Rican">Costa Rican</option>
<option value="Croatian">Croatian</option>
<option value="Cuban">Cuban</option>
<option value="Cypriot">Cypriot</option>
<option value="Danish">Danish</option>
<option value="Dominican">Dominican</option>
<option value="Ecuadorian">Ecuadorian</option>
<option value="Egyptian">Egyptian</option>
<option value="El Salvadoreah">El Salvadoreah</option>
<option value="Englishman">Englishman</option>
<option value="Eritrean">Eritrean</option>
<option value="Estonian">Estonian</option>
<option value="Ethiopian">Ethiopian</option>
<option value="European">European</option>
<option value="Fijian">Fijian</option>
<option value="Finnish ">Finnish</option>
<option value="Frenchman">Frenchman</option>
<option value="French">French</option>
<option value="Gabonese">Gabonese</option>
<option value="Gambian">Gambian</option>
<option value="German">German</option>
<option value="Ghanaian">Ghanaian</option>
<option value="Greek">Greek</option>
<option value="Grenadian">Grenadian</option>
<option value="Guatemalan">Guatemalan</option>
<option value="Guinean">Guinean</option>
<option value="Guyanese">Guyanese</option>
<option value="Haitian">Haitian</option>
<option value="Dutch">Dutch</option>
<option value="Honduran">Honduran</option>
<option value="Hungarian">Hungarian</option>
<option value="Icelandic">Icelandic</option>
<option value="Indian">Indian</option>
<option value="Indonesian">Indonesian</option>
<option value="Iranian">Iranian</option>
<option value="Iraqi">Iraqi</option>
<option value="Irishman">Irishman</option>
<option value="Israeli">Israeli</option>
<option value="Jamaican">Jamaican</option>
<option value="Japanese">Japanese</option>
<option value="Jordanian">Jordanian</option>
<option value="Kazakh">Kazakh</option>
<option value="Kenyan">Kenyan</option>
<option value="Kirgyz">Kirgyz</option>
<option value="Korean">Korean</option>
<option value="Kuwaiti">Kuwaiti</option>
<option value="Laotian">Laotian</option>
<option value="Latvian">Latvian</option>
<option value="Lebanese">Lebanese</option>
<option value="Liberian">Liberian</option>
<option value="Libyan">Libyan</option>
<option value="Liechtensteiner">Liechtensteiner</option>
<option value="Lithuanian">Lithuanian</option>
<option value="Luxembourger">Luxembourger</option>
<option value="Madagascan">Madagascan</option>
<option value="Malawian">Malawian</option>
<option value="Malaysian">Malaysian</option>
<option value="Maldivian">Maldivian</option>
<option value="Malian">Malian</option>
<option value="Maltese">Maltese</option>
<option value="Mauritanian">Mauritanian</option>
<option value="Mauritian">Mauritian</option>
<option value="Mexican">Mexican</option>
<option value="Moldovan">Moldovan</option>
<option value="Monacan">Monacan</option>
<option value="Mongolian">Mongolian</option>
<option value="Moroccan">Moroccan</option>
<option value="Mozambiquean">Mozambiquean</option>
<option value="Namibian">Namibian</option>
<option value="Nepalese">Nepalese</option>
<option value="Dutch">Dutch</option>
<option value="New Zealander">New Zealander</option>
<option value="Nicaraguan">Nicaraguan</option>
<option value="Nigerian">Nigerian</option>
<option value="Norwegian">Norwegian</option>
<option value="Omanian">Omanian</option>
<option value="Omanis">Omanis</option>
<option value="Pakistani">Pakistani</option>
<option value="Palestinian">Palestinian</option>
<option value="Papuan">Papuan</option>
<option value="Paraguayan">Paraguayan</option>
<option value="Peruvian">Peruvian</option>
<option value="Philippine">Philippine</option>
<option value="Pole">Pole</option>
<option value="Portuguese">Portuguese</option>
<option value="Qatari">Qatari</option>
<option value="Romanian">Romanian</option>
<option value="Russian">Russian</option>
<option value="Rwandan">Rwandan</option>
<option value="Samoan">Samoan</option>
<option value="San Marinese">San Marinese</option>
<option value= "Scot">Scot</option>
<option value="Senegalese">Senegalese</option>
<option value="Serb">Serb</option>
<option value="Seychellois">Seychellois</option>
<option value="Sierra Leonean">Sierra Leonean</option>
<option value="Singaporean">Singaporean</option>
<option value="Slovak">Slovak</option>
<option value="Slovene">Slovene</option>
<option value="Somali">Somali</option>
<option value="South African">South African</option>
<option value="Spanish">Spanish</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudanese">Sudanese</option>
<option value="Surinamese">Surinamese</option>
<option value="Swedish">Swedish</option>
<option value="Swiss">Swiss</option>
<option value="Syrian">Syrian</option>
<option value="Taiwanese">Taiwanese</option>
<option value="Tajik">Tajik</option>
<option value="Tanzanian">Tanzanian</option>
<option value="Thai">Thai</option>
<option value="Togolese">Togolese</option>
<option value="Trinidadian">Trinidadian</option>
<option value="Tunisian">Tunisian</option>
<option value="Turkish">Turkish</option>
<option value="Turkmen">Turkmen</option>
<option value="Tuvaluan">Tuvaluan</option>
<option value="Ugandan">Ugandan</option>
<option value="Ukrainian">Ukrainian</option>
<option value="Uruguayan">Uruguayan</option>
<option value="Venezuelan">Venezuelan</option>
<option value="Vietnamese">Vietnamese</option>
<option value="Yemeni">Yemeni</option>
<option value="Yugoslavian">Yugoslavian</option>
<option value="Zambian">Zambian</option>
<option value="Zimbabwean">Zimbabwean</option>

</select>
            </label>
            <br />
            <label class="description">
            Phone Number<span>*</span>
            <br />
            <input class="element text" type="text" name="phone" id="phone" />
            </label>
            <br />
            <label class="description">
            Mobile Number<span>*</span>
            <br />
             <input class="element text" type="text" name="mobile" id="mobile" />
            </label>

            <p>Please enter your mailing address:<span>*</span> </p>
        <p>
          <label class="description">
            <textarea class="element text" name="address" id="address" cols="45" 
rows="5"></textarea>
          </label>
        </p>
          <label class="description">
            E-mail Address<span>*</span>
            <br />
            <input class="element text" type="text" name="email" id="email" />
            </label>
          <br />
          <h3><u>Qualifications Details</u></h3>
           <p>
          <label class="description">
            Education Level<span>*</span> 
            <br />
            <select name="education" id="education">
              <option value="Highschool">High School or Equivalent</option>
              <option value="Certification/Diploma">Certification/Some Colleges/Diploma</option>
              <option value="Bachelor's Degree">Bachelor's Degree / higher diploma</option>
              <option value="Master's Degree">Master's Degree</option>
              <option value="Doctorate">Doctorate</option>
            </select>
          </label>
        </p>
        <label class="description">
            Major (Engineering, Information Technology etc.)<span>*</span>
            <br />
            <input class="element text" type="text" name="major" id="major" />
            </label>
            <br />
            <label class="description">
            College/University Name<span>*</span>
            <br />
            <input class="element text" type="text" name="college" id="college" />
            </label>
            <p>Training Courses:</p>
        <p>
          <label>
            <textarea class="element text" name="training" id="training" cols="45" 
rows="5"></textarea>
          </label>
        </p>
           <p>Other Certificates: </p>
        <p>
          <label>
            <textarea class="element text" name="certificates" id="certificates" cols="45" 
rows="5"></textarea>
          </label>
        </p>
        <h3><u>Programming Experience</u></h3>  
        What type of job are you looking for? <span>*</span></p>
        <p>
          <label>
<input name="job" type="checkbox" id="job" value="programmer" 
 />
Programmer<br />
            <input type="checkbox" name="job" id="web designer" 
value="web designer" />
            Web Designer<br />
                      </label>             
        </p>
        If Both, please specify first choice:
        <br />
        <input class="element text" type="text" name="choice" id="choice" />

        <p>Which programming languages do you work with? <span>*</span></p>
        <p>
          <label>
            <input name="languages1" type="checkbox" 
id="languages1" value="visualbasic" checked="checked" />
            Visual Basic</label>
          <br />
          <label>
            <input type="checkbox" name="languages2" 
value="c#" id="languages1" />            C#</label>
          <br />
          <label>
            <input type="checkbox" name="languages4" 
value="SQL" id="languages3" />
            SQL
            <br />
            <input name="languages5" type="checkbox" 
id="languages4" value=".net" />
            .net</label>
          <br />
          <label>
            <input type="checkbox" name="languages6" 
value="access" id="languages5" />            Microsoft Access</label>
          <br />
          <label>
            <input type="checkbox" name="languages7" 
value="oracle" id="languages6" />
            Oracle
          <br />
            <input name="languages8" type="checkbox" 
id="languages7" value="php" />
            PHP</label>
          <br />
          <label>
            <input type="checkbox" name="languages9" 
value="mysql" id="languages8" />            mySQL</label>
          <br />
          <label>
            <input type="checkbox" name="languages10" 
value="html" id="languages9" />
            HTML
          <br />
            <input name="languages11" type="checkbox" 
id="languages10" value="css" />
            CSS</label>
          <br />
          <label>
            <input type="checkbox" name="languages12" 
value="javascript" id="languages11" />            Javascript</label>
          <br />
          <label>
            <input type="checkbox" name="languages13" 
value="jqueryajax" id="languages12" />
            jQuery/AJAX
            </label>
        </p>
        <p>How do you prefer to be contacted?<br />
        </p>
        <p>
          <label>
            <select name="contact" id="contact">
              <option value="phone">Phone</option>
              <option value="email">E-mail</option>
              <option value="post">post</option>
            </select>
          </label>
        </p>
         <h3><u>Reference</u></h3> 
         <label class="description">
            Reference Name<span>*</span>
            <br />
            <input class="element text" type="text" name="refname" id="refname" />
            </label>
         <br />
         <label class="description">
            Reference Phone Number<span>*</span>
            <br />
            <input class="element text" type="text" name="refphone" id="refphone" />
            </label>

        <h3><u>Attachments</u></h3> 
        <p>CV (Maximum 250kb):<span>*</span> 
        <br />
        <input class="element text" type="file" name="file1" id="cv"></p>
   <p>Photo (Maximum 250kb):<span>*</span> 
   <br />
   <input class="element text" type="file" name="file2" id="photo"></p>
   <p>Passport Copy (Maximum 250kb):
   <br />
   <input class="element text" type="file" name="file3"></p>
     <p>
          <label>
            <input id="saveForm" class="button_text" type="submit" name="Submit" 
value="Send " />
          </label>
          <label>
            <input id="saveForm" class="button_text" type="reset" name="button2" 
value="Reset" />
          </label>
          <br />
        </p>
        <p><strong>Privacy Policy</strong>: the information you 
provide will not be shared it is only for the use in our 
selection of potential employees. </p>

</form>

javascript

3 Contributors
4 Replies
1K Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by gon1387

All 4 Replies

stbuchok

11 Years Ago

Use document.getElementById to find your elements. Also start testing using IE if you want it to work in IE.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gon1387 22 Newbie Poster · Answer 1 · 2012-12-17T14:01:01+00:00

You can use getElementById, as stbuchok's suggested, or you can also explicitly access the value through document.[YOUR_FORM_NAME].[YOUR_INPUT_NAME].value

Base on your HTML, here's the ref on your firstname's input value: document.form1.fname.value

karlcunanan 0 Light Poster · Answer 2 · 2012-12-17T16:08:34+00:00

It works! Thanks guys! But I want to clear my mind regarding this, why is it only in IE that needs to be like that?

gon1387 22 Newbie Poster · Answer 3 · 2012-12-17T20:32:15+00:00

Actually the one I'm quite unsure of is how'd you able to access the form element's value with just using [NAME].value only, in the global context; and how was it able to run in Firefox and Chrome without knowing the form's elements. What I'm trying to say is, when submit event fires up, the names it has access at, is it's own siblings only, in your case siblings of the form elements in the document's form collections. It's like this:

// when MyNameIsA is access in this context, it only knows MyNameIsA of elementA
    // and not their children
<elementA name="MyNameIsA">
    // when MyNameIsA is access in this context, it only knows MyNameIsA of subElementA
    // and not their parent's
    <subElementA name="MyNameIsA"></subElementA>
    <subElementB name="MyNameIsB"></subElementB>
</elementA>
<elementB name="MyNameIsB">
    // when MyNameIsA is access in this context, it only knows MyNameIsA of subElementA
    // in elementB, and not in elementA not its children
    // to access subElementA in elementA you should explicitly
    // call the elementA.MyNameIsA to call on elementA's subElementA
    <subElementA name="MyNameIsA"></subElementA>
    <subElementB name="MyNameIsB"></subElementB>
</elementB>

So in your case, your best bet of accessing a single form in a page is:
document.getElementById
But if you're using multiple form in a page and you think would have a chance of getting the any duplicate names, you can use:
document.forms["PUT_YOUR_FORM_NAME_HERE"]["YOUR_INPUT_NAME"].value
The reason behind this is, getElementById would get only the first element it finds using your queried ID.
and if you're arbitrarily accesing an input through submit event, get the target form and access it like this form.["YOUR_INPUT_NAME"].value if you assign the target form element the variable form.

Javascript Validation not working in IE only

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers