SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form - option list - validation problem

    I am having a problem with a simple javascript validation routine for a drop-down list, which works fine when there is only one form on the web page, but breaks when another form is added. I am new to javascript, so I expect this is a simple error in syntax.

    When there was only one form on the page:

    It was called by:

    <form method="post" action="path-to-cgi formmail script" onsubmit="return checkForm(this)">

    and the javascript routine, in the head of the document, was:

    <script type="text/javascript">
    <!--
    function checkForm(form) {
    if (form.realname.value == "") {
    alert("Please enter your name.");
    form.realname.focus();
    return false;
    }

    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)){
    alert("Invalid E-mail Address! Please re-enter.");
    form.email.select();
    form.email.focus();
    return (false);
    }

    var txt=form.classmatch.options[form.classmatch.selectedIndex].text;
    if (txt == "To Specify...") {
    alert("Please select the class match that you would like to play.");
    form.classmatch.focus();
    return false;
    }

    return true;
    }
    //-->
    </script>

    and it worked fine.

    A second form was added, and the forms given names. The javascript validation for the form with the drop-down (option) list works for the fields prior to the drop-down list, but then fails when it validates the drop-down - it passes through, failing to recognise when no selection has been made. The second form validates fine.

    The first form, with the drop-down list, is called by:

    <form name="request" id="request" method="post" action="path-to-cgi formmail script" onsubmit="return checkForm(request)">

    The second form (without a drop-down list), is called by:

    <form name="result" method="post" action="path-to-cgi formmail script" onclick="return checkForm(result)">

    The javascript routines, again in the head of the page are:

    <script type="text/javascript">
    <!--
    function checkForm(request) {
    if (request.realname.value == "") {
    alert("Please enter your name.");
    request.realname.select();
    request.realname.focus();
    return false;
    }

    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(request.email.value)){
    return (true);
    }
    alert("Invalid E-mail Address! Please re-enter.");
    request.email.select();
    request.email.focus();
    return (false);
    }


    var txt=request.classmatch.options[request.classmatch.selectedIndex].text;
    if (txt == "Choose Your Event") {
    alert("Please select the class match that you would like to play.");
    request.classmatch.focus();
    return (false);
    }

    return true;
    }
    //-->
    </script>

    <script type="text/javascript">
    <!--
    function checkForm(result) {

    if (result.realname.value == "") {
    alert("Please enter your name.");
    result.realname.focus();
    return false;
    }

    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(result.email.value)){
    alert("Invalid E-mail Address! Please re-enter.");
    result.email.select();
    result.email.focus();
    return false;
    }

    if (result.event.value == "") {
    alert("Please enter the event name and number, as it appears in the PGN header.");
    result.event.focus();
    return false;
    }

    if (result.pgn_record.value == "") {
    alert("Please paste in the full record of your game.");
    result.pgn_record.select();
    result.pgn_record.focus();
    return false;
    }

    return true;
    }
    //-->
    </script>

    I am making a fundamental error somewhere, but I can't see it. I'd be grateful for some advice to get it working.

    Many thanks
    Alan

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Don't change onsubmit="return checkForm(this)" for any of the forms. this points to the form the event is triggered on, so you don't need to specify the names.

    Another thing that could cause trouble is the text you're checking the selection of dropdown box on -- "Choose Your Event". Change the text and it fails. Check the value instead.
    Saul

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still not working

    Thanks for those tips.

    I have changed the onsubmit event on both forms, as suggested, which now read: onsubmit="return checkForm(this)"

    But, on its own, has no effect.

    I then amended the validation script for the drop-down list to check the value, instead of the text. That section of the form is:

    <select name="classmatch" id="classmatch">
    <option selected="selected" value="unchanged">Choose Your Event</option>

    and that part of the script was changed to:

    var txt=request.classmatch.options[request.classmatch.selectedIndex].value;
    if (txt == "unchanged") {
    alert("Please select the class match that you would like to play.");
    request.classmatch.focus();
    return (false);
    }

    I'm afraid the validation routine still fails to recognise when no selection has been made, so would be grateful if you or anyone has any further ideas.

    Thanks again,
    Alan


Bookmarks

Posting Permissions

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