Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry Client side JavaScript form validation (uses ajax) - Form won't submit, HELP!

    I've literally tried everything. Read 26 tutorials, interchanged code, etc.

    My validation functions all work. My AJAX functions work (tested manually using servlet URL's).

    The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.

    I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.

    html form:
    Code:
    <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
            <table cellspacing="5" style="border: 2px solid black;">
                <tr>
                    <td valign="top">
                        <table cellspacing="5">
                            <tr>
                                <td>*First name</td>
                                <td align="right"><span id="valid_one"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
                            </tr>
                            <tr>
                                <td align="left">*Last name</td>
                                <td align="right"><span id="valid_two"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
                            </tr>
                            <tr>
                                <td align="left">*Email address</td>
                                <td align="right"><span id="result"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
                            </tr>
                            <tr>
                                <td align="left">*Phone number</td>
                                <td align="right"><span id="valid_three"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
                            </tr>
                            <tr>
                                <td align="left">*City/Town</td>
                                <td align="right"><span id="valid_four"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>
                                    <select name="s">
                                        <option value="AL">Alabama
                                        <option value="AK">Alaska
                                        <option value="AZ">Arizona
                                        <option value="AR">Arkansas
                                        <option value="CA">California
                                        <option value="CO">Colorado
                                        <option value="CT">Connecticut
                                        <option value="DE">Delaware
                                        <option value="FL">Florida
                                        <option value="GA">Georgia
                                        <option value="HI">Hawaii
                                        <option value="ID">Idaho
                                        <option value="IL">Illinois
                                        <option value="IN">Indiana
                                        <option value="IA">Iowa
                                        <option value="KS">Kansas
                                        <option value="KY">Kentucky
                                        <option value="LA">Louisiana
                                        <option value="ME">Maine
                                        <option value="MD">Maryland
                                        <option value="MA">Massachusetts
                                        <option value="MI">Michigan
                                        <option value="MN">Minnesota
                                        <option value="MS">Mississippi
                                        <option value="MO">Missouri
                                        <option value="MT">Montana
                                        <option value="NE">Nebraska
                                        <option value="NV">Nevada
                                        <option value="NH">New Hampshire
                                        <option value="NJ">New Jersey
                                        <option value="NM">New Mexico
                                        <option value="NY">New York
                                        <option value="MC">North Carolina
                                        <option value="ND">North Dakota
                                        <option value="OH">Ohio
                                        <option value="OK">Oklahoma
                                        <option value="OR">Oregon
                                        <option value="PA">Pennsylvania
                                        <option value="RI">Rhode Island
                                        <option value="SC">South Carolina
                                        <option value="SD">South Dakota
                                        <option value="TN">Tennessee
                                        <option value="TX">Texas
                                        <option value="UT">Utah
                                        <option value="VT">Vermont
                                        <option value="VA">Virginia
                                        <option value="WA">Washington
                                        <option value="WV">West Virginia
                                        <option value="WI">Wisconsin
                                        <option value="WY">Wyoming
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td><span id="error"></span></td>
                            </tr>
                            <tr>
                                <td valign="top">*Anti-Spam Verification</td>
                                <td></td>
                                <td id="reCaptcha"></td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <table cellspacing="5">
                            <tr>
                                <td align="left">*Affiliation</td>
                                <td align="right"><span id="valid_five"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
                            </tr>
                            <tr>
                                <td align="left">*Research Area:</td>
                                <td align="right"><span id="valid_six"></span></td>
    
                                <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
                            </tr>
                            <tr>
                                <td valign="top" align="left">*Research Overview</td>
                                <td align="right"><span id="valid_seven"></span></td>
    
                                <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
                            </tr>
                            <tr>
                                <td align="left">*Talk Availability</td>
                                <td></td>
                                <td>
                                    <input type="radio" name="ta" value="In person">In person
                                    <input type="radio" name="ta" value="Online">Online
                                    <input type="radio" name="ta" value="Both" checked>Both
                                </td>
                            </tr>
                            <tr>
                                <td align="left" valign="top">Links</td>
                                <td></td>
                                <td>
                                    <table id="linkTable" border="0">
                                        <td><input type="text" style="width: 320px;" name="link"></td>
                                        <td><div id="result"></div></td>
                                    </table>
                                </td>
                                <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><span style="color: red;"></span></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <br />
            <input type="submit" id="submit" name="submit" value="Submit Form">
        </form>
    Javascript file:
    Code:
    /* 
     * script.js - ajax and table functions
     */
    
    var xmlHttp; // global instance of XMLHttpRequest
    var xmlHttp2; // second for captcha functions
    
    var validAjax = new Boolean();
    var validCaptcha = new Boolean();
    
    var valid_one = new Boolean();
    var valid_two = new Boolean();
    var valid_three = new Boolean();
    var valid_four = new Boolean();
    var valid_five = new Boolean();
    var valid_six = new Boolean();
    var valid_seven = new Boolean();
    
    function init() {
        showRecaptcha('reCaptcha');
    
        // Separate booleans for AJAX funcs
        validAjax = false;
        validCaptcha = false;
    
        // Booleanse for fields that don't require servlet validation
        valid_one = false;
        valid_two = false;
        valid_three = false;
        valid_four = false;
        valid_five = false;
        valid_six = false;
        valid_seven = false;
    }
    
    function showRecaptcha(element) {
        Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
    }
    
    function validate_form() {
        if (valid_one && valid_two && valid_three && valid_four && validEmail) {
            startCaptchaRequest();
    
            if (validCaptcha) {
                return true;
            }
        }
        else {
            alert("Submission contains errors. Please fill out all required fields before submitting.");
            return false;
        }
    }
    
    function validate_one() {
        if (document.getElementById("fn").value == 0) {
            valid_one = false;
            document.getElementById("valid_one").innerHTML = "No";
        }
        else {
            valid_one = true;
            document.getElementById("valid_one").innerHTML = "";
        }
    }
    
    function validate_two() {
        if (document.getElementById("ln").value == 0) {
            valid_two = false;
            document.getElementById("valid_two").innerHTML = "No";
        }
        else {
            valid_two = true;
            document.getElementById("valid_two").innerHTML = "";
        }
    }
    
    function validate_three() {
        if (document.getElementById("pn").value == 0) {
            valid_three = false;
            document.getElementById("valid_three").innerHTML = "No";
        }
        else {
            valid_three = true;
            document.getElementById("valid_three").innerHTML = "";
        }
    }
    
    function validate_four() {
        if (document.getElementById("c").value == 0) {
            valid_four = false;
            document.getElementById("valid_four").innerHTML = "No";
        }
        else {
            valid_four = true;
            document.getElementById("valid_four").innerHTML = "";
        }
    }
    
    function validate_five() {
        if (document.getElementById("affl").value == 0) {
            valid_five = false;
            document.getElementById("valid_five").innerHTML = "No";
        }
        else {
            valid_five = true;
            document.getElementById("valid_five").innerHTML = "";
        }
    }
    //
    //function validate_six() {
    //    if (document.getElementById("ra").value == 0) {
    //        valid_six = false;
    //        document.getElementById("valid_six").innerHTML = "No";
    //    }
    //    else {
    //        valid_six = true;
    //        document.getElementById("valid_six").innerHTML = "";
    //    }
    //}
    //
    //function validate_seven() {
    //    if (document.getElementById("ro").value == 0) {
    //        valid_seven = false;
    //        document.getElementById("valid_seven").innerHTML = "No";
    //    }
    //    else {
    //        valid_seven = true;
    //        document.getElementById("valid_seven").innerHTML = "";
    //    }
    //}
    
    function addLink(tableID) {
        var table = document.getElementById(tableID);
    
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
    
        var cell = row.insertCell(0);
        var element1 = document.createElement("input");
    
        element1.type = "text";
        element1.name = "link" + rowCount;
        element1.style.width = "320px";
    
        cell.appendChild(element1);
    }
    
    function limitText(limitField, limitCount, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        }
        else {
            limitCount.value = limitNum - limitField.value.length;
        }
    }
    
    function createXmlHttpRequest() {
        if(window.ActiveXObject) {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest) {
            xmlHttp=new XMLHttpRequest();
        }
    }
    
    function startRequest() {
        createXmlHttpRequest();
        
        var param1 = document.getElementById('mailfield').value;
    
        if (param1 == "") {
            validEmail = false;
            document.getElementById("result").innerHTML = "Blank";
        }
        else {
            xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.send(null);
        }
    }
    
    function handleStateChange() {
        if(xmlHttp.readyState==4) {
            if(xmlHttp.status==200) {
                var message =
                    xmlHttp.responseXML
                    .getElementsByTagName("valid")[0]
                    .childNodes[0].nodeValue;
                
                if (message == "Unregistered") {
                    validEmail = true;
                    document.getElementById("result").style.color = "green";
                }
                else {
                    validEmail = false;
                    document.getElementById("result").style.color = "red";
                }
    
                document.getElementById("result").innerHTML = message;
            }
            else {
                alert("Error checking e-mail address - " + xmlHttp.status +
                    " : " + xmlHttp.statusText);
            }
        }
    }
    function createCaptchaRequest() {
        if(window.ActiveXObject) {
            xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest) {
            xmlHttp2=new XMLHttpRequest();
        }
    }
    
    function startCaptchaRequest() {
        alert('made it to captcha requeswt');
        createCaptchaRequest();
    
        var param1 = Recaptcha.get_challenge();
        var param2 = Recaptcha.get_response();
    
        xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
        xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
        xmlHttp2.send(null);
    }
    
    function handleStateChangeCaptcha() {
        if(xmlHttp2.readyState==4) {
            if(xmlHttp2.status==200) {
                var message =
                    xmlHttp2.responseXML
                    .getElementsByTagName("result")[0]
                    .childNodes[0].nodeValue;
    
                if (message == "Valid") {
                    alert("captcha valid");
                    validCaptcha = true;
                }
                else {
                    document.getElementById("error").innerHTML = message;
                    validCaptcha = false;
                }
            }
            else {
                alert("Error checking captcha validity - " + xmlHttp2.status +
                    " : " + xmlHttp2.statusText);
            }
        }
    }

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi
    change:

    Code:
    <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
    to:

    Code:
    <form id="f1" name="form1" onsubmit="return validate_form(this)" action="register" method="post">
    untested

    LT
    Last edited by low tech; 02-13-2011 at 12:29 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by sam-the-man View Post
    I want to do all of my validation clientside; none serverside.
    Please don't. That's a really bad idea, as it equates to having no validation at all.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Yeah, you’ve got to have some server side validation at first. JavaScript is only made to add enhancements to an already working website. You may rely on JS alone if you’re on a closed system where you have total control but not on a public website.

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The only things I need to validate server-side are done using AJAX. Client-side validation in this case is only use to check mediocre things (like blank fields).

    I don't need to check to see whether someone's first name is already in my database....

    @ low-tech: I've tried that already man, no-go.

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    AJAX is no good either. Without real server side validation, your captcha is practically non-existant to any bot.

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm sort of new to web dev (on this level), could you elaborate a little? I guess maybe I'll switch to server-side authentication. AJAX authenticates my captcha on the server though, I don't understand why that doesn't work?

  • #8
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Sure, your Javascript asks the server whether the captcha is good, and if it isn't it will prevent form submission. But without Javascript active, none of this will happen, so the form can just be submitted without any validation at all.

  • Users who have thanked venegal for this post:

    sam-the-man (02-13-2011)

  • #9
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    function validate_form() {
        if (valid_one && valid_two && valid_three && valid_four && validEmail) {
            startCaptchaRequest();
    
            if (validCaptcha) {
                return true;
            }
        }
        else {
            alert("Submission contains errors. Please fill out all required fields before submitting.");
            return false;
        }
    }
    startCaptchaRequest() initialises an asynchronous request, but the next statement if (validCaptcha) relies on the result of that request, which cannot not have completed at that point.

  • #10
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by venegal View Post
    Sure, your Javascript asks the server whether the captcha is good, and if it isn't it will prevent form submission. But without Javascript active, none of this will happen, so the form can just be submitted without any validation at all.
    ohhh I get it, thanks man, I'm learning a lot. I've opted to use a jsp for my registration page. I've changed captcha validation to server-side. This is a neat little script, it even uses DB connection pooling

    Logic Ali: though I've changed my design approach, I was still curious about what was causing the validation to fail. Thanks a lot!

    You guys are legit


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •