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
    Sep 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help using OnChange for simple form validation

    Would appreciate some help making some minor enhancements to a pet adoption form: http://pawsct.org/application.php

    Problem - Applicants don't read. They answer "No" to the "Agree to Shelter Visit" question, then fill out the looooong application, and get abusive when told that they're not eligible for adoption. They apply from Florida and ignore the warnings about the 90 mile limit. Text notes just don't make enough of an impact.

    I want to use OnChange to give an alert if someone does not answer "Yes" to agree to a shelter visit (i.e. popup "You must agree to a shelter visit to qualify for an adoption from PAWS") and perhaps a warning message (red text reminder about the 90 mile limit next to the drop-down box) if someone enters a state other than CT.

    Second problem - I'm a volunteer who doesn't know javascript and can't cobble together a SIMPLE, workable solution from other code samples. Any assistance that you can provide would be most welcome and appreciated.

    Note: we are planning a redesign of the web site and may do some more sophisticated form validation (e.g. check age, valid e-mail, valid phone) in the future. But for now, we're just looking to check a few key fields for answers that would immediately disqualify an applicant.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Personally, I'd reorder the <form> so that the question about "come to the shelter" and "age" and "state" are the ONLY items that appear (all else hidden) until they answer those. Only if they answer "yes", 21+, and "CT" do you even bother to show the rest of the <form>.

    Skeleton code:
    Code:
    <head>
    <script type="text/javascript">
    function check(form)
    {
        var age = parseInt(form.Your_age.value);
        if ( isNaN(age) || age < 21 || age > 110 ) 
        {
            alert("You must be 21 years of age to adopt a pet.\n"
                 + "Please ask a parent or guardian to fill out this form for you.");
            return;
        }
        if ( form.Agree_to_shelter_visit.value != "Yes" )
        {
            alert("We're sorry, but you must actually visit the shelter\n"
                 + "in order to adopt a pet.  We do not allow any\n"
                 + "adoption without such a visit.");
            return;
        }
        if ( form.State.value != "Connecticut" )
        {
            alert("You must live within 90 miles of our facility\n"
                 + "in Norwalk, Connecticut.  At this time, we are\n"
                 + "not able to accept online applications from out of state");
            return;
        }
        document.getElementById("restOfForm").style.display = "block";
    }
    </script>
    </head>
    ...
    <INPUT name="Form_name" type="hidden" value="Pet Adoption Application"></TD></TR>
    <TABLE>
    <TR>
    	<TD align="right"><B><FONT COLOR="red">Your age: </FONT></B></TD>
    	<TD><INPUT name="Your_age" style="HEIGHT: 22px; WIDTH: 50px" onchange="check(this.form)"></TD>
    </TR>
    <TR>
    	<TD align="right"><B><FONT COLOR="red">Are you able and willing to visit<BR>the PAWS shelter in Norwalk, CT: </FONT></B></TD>
    	<TD><SELECT name="Agree_to_shelter_visit" onchange="check(this.form)">
                <OPTION selected> </OPTION>
                <OPTION value="Yes">Yes</OPTION>
                <OPTION>No</OPTION>
                </SELECT></TD>
    </TR>
    <TR>
    	<TD align="right"><B><FONT COLOR="red">Your state of residence:</FONT></B></TD>
    	<TD><SELECT name="State" style="HEIGHT: 22px; WIDTH: 155px" onchange="check(this.form)">
                <OPTION selected> </OPTION>
                <OPTION value="Connecticut">Connecticut</OPTION>
                <OPTION>Other</OPTION>
                </SELECT></TD>
    </TR>
    </table>
    <div id="restOfForm" style="display: none;">
    <table>
         ... everything else ...
    </table>
    </div>
    </form>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    faba (09-14-2010)

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Personally, I'd reorder the <form> so that the question about "come to the shelter" and "age" and "state" are the ONLY items that appear (all else hidden) until they answer those...
    I was considering a similar approach, but am working with the limitation that the web form needs to mirror the paper application as closely as possible, with the eventual goal to eliminate the printed form (just print the web form and fill it in manually).

    But the code sample seems very clear and workable with or without the non-display option, so I'll give it a shot.

    Many thanks for the quick response to a first-time newbie plea for help!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Well, you could just leave the order of the fields as is and put the
    Code:
    </table>
    <div id="restOfForm" style="display: none;">
    <table>
    just before, say, the "About Your Home" section. So the top part of the <form> with name, address, etc., is there. But none of the rest is there until at least those 3 fields are validly filled in.

    Could be improved beyond that, but it would at least be a starting point.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I put together a quick test: http://pawsct.org/application.validate.php

    Seems to work well except that it tries to validate all three fields on the first OnChange event, i.e if you enter a valid age it gives the shelter error before you have a chance to respond to that question. I guess I could check for null responses to shelter and state, or perhaps it's better to create three separate validation functions?

    Thanks again for the assistance. Nice to have a quick code suggestion that works on the first try!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Oh, yeah. DOH On me for that.

    Maybe better would be to add a button that says something like "Ready to fill out the rest of the form" and have *IT* call the function, instead.

    I don't think you want to allow blank/null values for the obvious reason that some doofus might leave one or all three blank.

    Get rid of the ONCHANGE calls and just invoke that code I showed from the new button's ONCLICK event.

    You could even have it hide the button at the same time it shows the rest of the <form> fields.

    Let's see...
    Code:
    <head>
    <script type="text/javascript">
    function check(btn)
    {
        var form = btn.form;
        var age = parseInt(form.Your_age.value);
        if ( isNaN(age) || age < 21 || age > 110 ) 
        {
            alert("You must be 21 years of age to adopt a pet.\n"
                 + "Please ask a parent or guardian to fill out this form for you.");
            return;
        }
        if ( form.Agree_to_shelter_visit.value != "Yes" )
        {
            alert("We're sorry, but you must actually visit the shelter\n"
                 + "in order to adopt a pet.  We do not allow any\n"
                 + "adoption without such a visit.");
            return;
        }
        if ( form.State.value != "Connecticut" )
        {
            alert("You must live within 90 miles of our facility\n"
                 + "in Norwalk, Connecticut.  At this time, we are\n"
                 + "not able to accept online applications from out of state");
            return;
        }
        btn.style.display = "none";
        document.getElementById("restOfForm").style.display = "block";
    }
    </script>
    </head>
    ...
        <input type="button" value="show me the money" onclick="check(this);"/>
    ...
    [/code]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    faba (09-16-2010)

  • #7
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The button idea could work, but I'm still trying to focus on the shelter staff's request that the web and paper versions of the app be identical, to the extent possible. I played around with your code and came up with what seems to be a workable solution to separate the three validations. Any and all comments, corrections and suggestions would be welcome.

    Updated test page: http://pawsct.org/application.validate.php

    The updated javascript is viewable at the top of the source for the test page.

    Thanks again for your continued assistance!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    That of course works, but what if the person simply SKIPS OVER one or more of those items on the form???

    My idea of using the "see rest of form" button was that, once the button is pushed *AND* the user has correctly answered all the questions above the button (yes, you could then easily put in check to be sure all required info is entered), *THEN* the rest of the form appears and the button itself disappears. So at that point, the form does indeed match the paper form.

    But up to you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You're right that it would be a better approach. If I could start over, I'd design the app more like a survey, where required questions are validated before moving to the next section, and an overall progress bar is shown. But the staff wants to be able to print out a blank application directly from the website, so for now I just check required fields at submit and display the entire form from the start.

    Thanks again for the sample code and tips to help get this going!

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    But the staff wants to be able to print out a blank application directly from the website
    Ummm...that's easy.

    Just change what is printed vs. what is displayed!

    Code:
    <style type="text/css"> 
    @media screen {
    	body, td, th, input { font-size: 12pt; }
    	.screeninline { display: inline }
            .screenblock { display: block }
            div#RestOfForm { display: none; }
    	table { width: 980px; }
    	}
    @media print {
    	body, td, th, input { font-size: 8pt; }
    	.screeninline { display: none }
            .screenblock { display: none }
            div#RestOfForm { display: block; }
    	table { width: 720px; }
    	}
    </style>
    ...
    <table>
         ... the top of the form ...
    </table>
    <input class="screeninline" type="button" value="Check Entries and Show Rest Of Form" 
           onclick="...do the validation and change display of rest of form if okay..." />
    
    <div id="RestOfForm">
        ... rest of form ...
    </div>
    ...
    Notice those two classes ".screeninline" and ".screenblock": You can use those in other places to hide stuff you don't want printed. You might have a link to a google map that shows where the shelter is that you hide on the printed form. etc.

    You could even have other classes (".printblock", et al.) that would only show up on the printed page.

    Notice the ability to change font sizes, depending upon the media. And table widths. That can be especially important.

    You can also do this by having two separate ".css" stylesheets: One for screen, one for print.

    http://css-discuss.incutio.com/wiki/Print_Stylesheets
    http://css-discuss.incutio.com/wiki/Media_Stylesheets

    You could use:
    Code:
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    And so on.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •