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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio button validation problem

    I should start by saying that I'm developing this form in the Lotus Domino environment which may or may not be causing some of this "strange" behavior.
    A form that I've been working has a section that requires some field validation based on whether a radio button is checked. This section comes in towards the end of the form. Now, I've been able get the validation to work however the form will not submit. After further analysis I found that what it seems not to like is the 'name' tag for the radio button. If I remove the tag the form will submit. However, doing that bypasses my validation. If I leave the name tag in and change from a radio to a button the form will submit. The code I have is as follows:

    <input type="radio" name="second" onClick="yes3()" value="Yes" )>Yes <input type="radio" name="second" onClick="no3()" value="No" )>No


    I'm using name="second" so I can use the below validation:

    if (document.forms[0].second[0].checked && Date2.value=="") {
    alert('Please enter a valid Date for your 2nd event.');
    Form.Date2.focus();

    If I need to use buttons rather than radio's how would I alter the validation code.

    Thank you,

    Mark

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Why not post all your code?

    For example, this is odd:

    if (document.forms[0].second[0].checked && Date2.value=="") {
    alert('Please enter a valid Date for your 2nd event.');
    Form.Date2.focus();

    Presumably it's in a function; you're using an absolute reference for the radio button, a solo name property for the Date2 field - and - I'm assuming - a passed form object (Form) for the last. What you've described is not typical; there's an error somewhere.

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is all the code currently in the form header:



    function refresh () {
    _doClick('$Refresh',this,'_self');
    }
    function yes1() {
    ExtVendorDiv.style.display='';
    }
    function yes2() {
    RoomReqDiv.style.display='';
    }
    function yes3() {
    RoomReq2Div.style.display='';
    }
    function yes4() {
    RoomReq3Div.style.display='';
    }
    function no1() {
    ExtVendorDiv.style.display='none';
    }
    function no3() {
    RoomReq2Div.style.display='none';
    }
    function no4() {
    RoomReq3Div.style.display='none';
    }
    function submitButton ( theForm ) {
    AssociateID_1 = document.forms[0].AssociateID_1.value;
    Date1 = document.forms[0].Date1.value;
    Title1 = document.forms[0].Title1.value;
    Time1 = document.forms[0].Time1.value;
    EndTime1 = document.forms[0].EndTime1.value;
    Participants1 = document.forms[0].Participants1.value;
    Date2 = document.forms[0].Date2.value;
    Title2 = document.forms[0].Title2.value;
    Time2 = document.forms[0].Time2.value;
    EndTime2 = document.forms[0].EndTime2.value;
    Participants2 = document.forms[0].Participants2.value;
    Date3 = document.forms[0].Date3.value;
    Title3 = document.forms[0].Title3.value;
    Time3 = document.forms[0].Time3.value;
    EndTime3 = document.forms[0].EndTime3.value;
    Participants3 = document.forms[0].Participants3.value;
    if ( AssociateID_1 == "" ) {
    alert ("You must enter a valid Associate ID number.");
    theForm.AssociateID_1.focus();
    }else{
    if ( Date1 == "" ) {
    alert ("You must enter a valid Event Date.");
    theForm.Date1.focus();
    }else{
    if ( Title1 == "" ) {
    alert ("You must enter a valid Event Title.");
    theForm.Title1.focus();
    }else{
    if ( Time1 == "" ) {
    alert ("You must enter a valid Start Time.");
    theForm.Time1.focus();
    }else{
    if ( EndTime1 == "" ) {
    alert ("You must enter a valid End Time.");
    theForm.EndTime1.focus();
    }else{
    if ( Participants1 == "" ) {
    alert ("You must enter a valid Number of Participants.");
    theForm.Participants1.focus();
    }else{
    if (document.forms[0].event2[0].checked && Date2=="") {
    alert('Please enter a valid Date for your 2nd event.');
    theForm.Date2.focus();
    }else{
    return;
    }else{
    theForm.submit();
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }



    Below are the form fields in the body:


    Requestor Information
    Associate ID:


    Requestor Name: Division:
    Location/Floor: Cost Center:
    Telephone #: Facilitator:



    Will there be an external vendor?
    <input type="radio" name="second" onClick="yes1()" value="Yes" );">Yes <input type="radio" name="second" onClick="no1()" value="No" );">No

    [<div id="ExtVendorDiv" style="display:none">][<BR>]

    External Vendor Information
    [<BR>]
    External Company:
    External Contact/Facilitator:
    Phone Number:

    [</DIV>]


    <input style='font: bold 12px verdana, arial, default sans-serif; color : #483D8B; background-color : 192,192,192; ' type="button" onClick="yes2()" value="Room Requests" );">

    [<div id="RoomReqDiv" style="display:none">][<BR>]

    *Event Date: *Event Title:
    *Start Time: *End Time:
    *Number of Participants: Room Configuration:
    Number of Easels: Number of Flip Charts:
    Podium: Other:
    [<BR>]
    Do you need to request another event?

    <input type="radio" name="event2" onClick="yes3()" value="Yes" );">Yes <input type="radio" name="event2" onClick="no3()" value="No" );">No
    [</div>]

    [<BR>]
    [<div id="RoomReq2Div" style="display:none">][<BR>]

    *Event Date: *Event Title:
    *Start Time: *End Time:
    *Number of Participants Room Configuration:
    Number of Easels: Number of Flip Charts:
    Podium: Other:



    Do you need to request another event?

    <input type="radio" name="event3" onClick="yes4()" value="Yes" );">Yes <input type="radio" name="event3" onClick="no4()" value="No" );">No
    [</div>]

    [<BR>]
    [<div id="RoomReq3Div" style="display:none">][<BR>]

    *Event Date: *Event Title:
    *Start Time: *End Time:
    *Number of Participants: Room Configuration:
    Number of Easels: Number of Flip Charts:
    Podium: Other:
    [</div>]

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    One way to do validation:

    Use the form's onsubmit handler:

    <form........onsubmit="return submitButton(this)">

    You can use:

    <input type="submit" onclick="return submitButton(this.form)">

    ..as well; the first is preferable. Pass the form object; use it something like this:

    function submitButton (f) {
    if (!f.AssociateID_1.value) {
    alert ("You must enter a valid Associate ID number.");
    f.AssociateID_1.focus();
    return false;
    }
    if (!f.Date1.value) {
    alert ("You must enter a valid Event Date.");
    f.Date1.focus();
    return false;
    }
    if (!f.Title1.value) {
    alert ("You must enter a valid Event Title.");
    f.Title1.focus();
    return false;
    }

    ......and so on. Finally:

    if (f.event2[0].checked && !f.Date2.value) {
    alert('Please enter a valid Date for your 2nd event.');
    f.Date2.focus();
    return false;
    }
    return true;
    }

    Also:

    <input type="radio" name="event3" onClick="yes4()" value="Yes" );">Yes

    Might want to remove that.

  • #5
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the code; it is much cleaner than mine. Unfortunately I still run into the exact problem. The form will not submit once it reaches that radio button validation and the IE browser reports no errors; I just recieve a "page cannot be found". I made the following changes to see what effect it would have.

    Left the input type as "radio" and changed the "name" tag to another name (to bypass validation) - Result - form would not submit

    Left input type as "radio" and removed the "name" tag entirely - Result - validation bypassed; form would submit

    Changed input type to button and left name tag - Result - validation bypassed; form would submit.

    I don't know how valid this little test was but it seems have a problem with radio button validation. I did post this on a Domino forum to see if it's the environment but the responses I get back don't seem to support that. Being a novice, I'm not quite sure how to change the code to validate based on a button click but I'd be curious to see if it indeed behaves differently.

    Thanks again for your help.

    Mark

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Mark -

    Be glad to help more on this. If you can, zip that page up & attach it below; seeing the entire structure always helps. Again - there's nothing obvious in your description (to me) that, in itself, suggests what might be going amiss.

    btw: "page cannot be found" usually pops up when a form has been submitted and the action URL can't be located.

    adios

  • #7
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.
    Attached Files Attached Files

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Here's the basic idea; left out the fancy DHTML stuff; you'd know better what the specific concept is..


    <html>
    <head>
    <script type="text/javascript" language="javascript">

    function displayHide(id) {
    var el = document.all ? document.all(id) :
    document.getElementById ? document.getElementById(id) : null;
    if (el && el.style) el.style.display = (el.style.display == 'none') ? '' : 'none';
    }

    function checkform(f) {
    if (!f.AssociateID_1.value) {
    alert ('You must enter a valid Associate ID number.');
    f.AssociateID_1.focus();
    return false;
    }
    if (!f.Date1.value) {
    alert ('You must enter a valid Event Date.');
    f.Date1.focus();
    return false;
    }
    if (!f.Title1.value) {
    alert ('You must enter a valid Event Title.');
    f.Title1.focus();
    return false;
    }
    if (!f.Time1.value) {
    alert ('You must enter a valid Event Time.');
    f.Time1.focus();
    return false;
    }
    if (!f.EndTime1.value) {
    alert ('You must enter a valid Event End Time.');
    f.EndTime1.focus();
    return false;
    }
    if (!f.Participants1.value) {
    alert ('You must enter a valid Number of Participants.');
    f.Participants1.focus();
    return false;
    }
    if (f.event2[0].checked) {
    if (!f.Date2.value) {
    alert('Please enter a valid Date for your 2nd event.');
    f.Date2.focus();
    return false;
    }
    if (!f.Title2.value) {
    alert('Please enter a valid Title for your 2nd event.');
    f.Title2.focus();
    return false;
    }
    if (!f.Time2.value) {
    alert('Please enter a valid Time for your 2nd event.');
    f.Time2.focus();
    return false;
    }
    if (!f.EndTime2.value) {
    alert('Please enter a valid End Time for your 2nd event.');
    f.EndTime2.focus();
    return false;
    }
    if (!f.Participants2.value) {
    alert('Please enter a valid Number of Participants for your 2nd event.');
    f.Participants2.focus();
    return false;
    }
    }
    if (f.event3[0].checked) {
    if (!f.Date3.value) {
    alert('Please enter a valid Date for your 3rd event.');
    f.Date3.focus();
    return false;
    }
    if (!f.Title3.value) {
    alert('Please enter a valid Title for your 3rd event.');
    f.Title3.focus();
    return false;
    }
    if (!f.Time3.value) {
    alert('Please enter a valid Time for your 3rd event.');
    f.Time3.focus();
    return false;
    }
    if (!f.EndTime3.value) {
    alert('Please enter a valid End Time for your 3rd event.');
    f.EndTime3.focus();
    return false;
    }
    if (!f.Participants3.value) {
    alert('Please enter a valid Number of Participants for your 3rd event.');
    f.Participants3.focus();
    return false;
    }
    }
    return true;
    }

    </script>
    </head>
    <body>
    <form action="javascript&#58;alert('Submitted !')" method=post
    onsubmit="return checkform(this)">
    <input name="AssociateID_1" type="text"> AssociateID<br>
    <input name="Date1" type="text"> Date<br>
    <input name="Title1" type="text"> Title<br>
    <input name="Time1" type="text"> Time<br>
    <input name="EndTime1" type="text"> End Time<br>
    <input name="Participants1" type="text"> Participants<hr>
    Second event? <input name="event2" type="radio"
    onclick="displayHide('second')">yes
    <input name="event2" type="radio" checked="checked"
    onclick="displayHide('second')">no<hr>
    <span id="second" style="display:none;">
    <input name="Date2" type="text"> Date<br>
    <input name="Title2" type="text"> Title<br>
    <input name="Time2" type="text"> Time<br>
    <input name="EndTime2" type="text"> End Time<br>
    <input name="Participants2" type="text">Participants<hr>
    </span>
    Third event? <input name="event3" type="radio"
    onclick="displayHide('third')">yes
    <input name="event3" type="radio" checked="checked"
    onclick="displayHide('third')">no<hr>
    <span id="third" style="display:none;">
    <input name="Date3" type="text"> Date<br>
    <input name="Title3" type="text"> Title<br>
    <input name="Time3" type="text"> Time<br>
    <input name="EndTime3" type="text"> End Time<br>
    <input name="Participants3" type="text"> Participants<hr>
    </span>
    <br><br>
    <input type="submit" value="DONE">
    </form>
    </body>
    </html>
    Last edited by adios; 07-07-2002 at 01:21 AM.

  • #9
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to thank you for your help. I cleaned up my code based on your sample and it is much cleaner. Unfortunately I'm still running into the same problem. For some reason it seems that the "name" tag is at the root of the problem. With it in there the validation works flawlessly but the form will not submit. With it removed, the form submits fine. I have to suspect that it may have something to do with the Domino environment. I'll do some more investigating on the Domino sites. Again, I appreciate the time you have taken to work with me on this.


    Mark


  •  

    Posting Permissions

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