Home/ Questions/Q 8679429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:58:13+00:00

So I’ve been mulling over this particular problem for 2 hours now… at the

  • 0

So I’ve been mulling over this particular problem for 2 hours now… at the moment I am trying to validate a form using the following plugin from jQuery:

http://docs.jquery.com/Plugins/Validation

So far I have got the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Patient Form</title>
        <link rel="stylesheet" href="css/styles.css" type="text/css">
        <link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
        <script src="js/html5.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/jquery.validate.js"></script>

        <script type="text/javascript">
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });;
        </script>

  <script>
  $(document).ready(function() {

    $("#dateOfBirth").datepicker({
            dateFormat : 'mm/dd/yy',
            changeMonth : true,
            changeYear : true,
            yearRange: '-100y:c+nn',
            maxDate: '-1d'
        }
    );

    $("#firstNames").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your first names (required)."
    });

    $("#surname").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your surname (required)."
    });

    $("#salutation").validate({
        expression: "if (isChecked(SelfID)) return true; else return false;",
        message: "Please choose an option (required)."
    });

    $("#homeAddress").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your home address (required)."
    });

    $("#homePhone").validate({
        expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 9)return true; else return false;",
        message: "Please enter your home phone (required - 9 digits) (e.g 034567890)",
        required: true,
        minlength: 9,
        maxlength:9
    });

    $("#workPhone").validate({
        expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 9)return true; else return false;",
        message: "Your work phone requires 9 digits (e.g 034567890)",
        required: false, // this should not make this field "required"
        minlength: 9,
        maxlength:9
    });

    $("#cellPhone").validate({
        expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 10)return true; else return false;",
        message: "Your cell phone requires 10 digits (e.g 02761234567)",
        required: false, // this should not make this field "required"
        minlength: 10,
        maxlength:10
    });

    $("#occupation").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your occupation (required)."
    });

    $("#dateOfBirth").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your date of birth (required)."
    });

    //checking that a "salutation is selected
    function countUnchecked() {
      var n = $("input:unchecked").length;
      if(n == 0){
          $("div").text("Please select a salutation.");
      }
    }
    countUnchecked();




  });

  </script>
    </head>

    <body>

        <div class="container">
            <header>
            <h1>Patient Form</h1>
            </header>

            <article class="intro_page">

            <fieldset class="fieldset_form1">
            <legend class="legend">Details 1</legend>
            <form id="form1" method="post" action="form2.php" enctype="application/x-www-form-urlencoded">


            <p class="fontStyle"><label for="firstNames" class="labelStyle_form1">First Names: </label>
            <input type="text" name="firstNames" id="firstNames" size="50" maxlength="150"></p>

            <p class="fontStyle"><label for="surnames" class="labelStyle_form1">Surname: </label>
            <input type="text" name="surname" id="surname" size="50" maxlength="150"></p>

            <p class="fontStyle"><label for="salutation" class="labelStyle_form1">Salutation:</label>
            <input name="salutation" id="salutation_1" value="Sir" type="radio" >Sir
            <input name="salutation" id="salutation_2" value="Dr" type="radio" >Dr
            <input name="salutation" id="salutation_3" value="Mr" type="radio" >Mr
            <input name="salutation" id="salutation_4" value="Mrs" type="radio" >Mrs
            <input name="salutation" id="salutation_5" value="Miss" type="radio" >Miss
            <input name="salutation" id="salutation_6" value="Ms" type="radio" >Ms
            </p>
            <div></div>

            <p class="fontStyle"><label for="homeAddress" class="labelStyle_form1">Home Address: </label>
            <input type="text" name="homeAddress" id="homeAddress" size="50" maxlength="200"></p>

            <p class="fontStyle"><label for="workAddress" class="labelStyle_form1">Work Address: </label>
            <input type="text" name="workAddress" id="workAddress" size="50" maxlength="200"></p>

            <p class="fontStyle"><label for="homePhone" class="labelStyle_form1">Home Phone: </label>
            <input type="text" name="homePhone" id="homePhone"></p>

            <p class="fontStyle"><label for="workPhone" class="labelStyle_form1">Work Phone: </label>
            <input type="text" name="workPhone" id="workPhone"></p>

            <p class="fontStyle"><label for="cellPhone" class="labelStyle_form1">Cell Phone: </label>
            <input type="text" name="cellPhone" id="cellPhone"></p>

            <p class="fontStyle"><label for="occupation" class="labelStyle_form1">Occupation: </label>
            <input type="text" name="occupation" id="occupation" size="50" maxlength="100"></p>

            <p class="fontStyle"><label for="dateOfBirth" class="labelStyle_form1">Date of Birth: </label>
            <input id="dateOfBirth" name="dateOfBirth"></p>

            <p class="buttonsAlign"><input type="button" onClick="location.href='index.php'" class="button blue gradient positionLeft" value="Back">
<input type="submit" class="button blue gradient" value="Next"></p>

            </form>
            </fieldset>

            </article>

            <footer>
            </footer>
        </div>

    </body>
</html>

Validating most of the fields seem to work fine, except I am not able to validate the radio input options (“salutation”). I am wanting an error message (similar to the other fields with a successful implementation) for if a radio option is not selected.

For the “workPhone” and “cellPhone” text fields, they are not required; however, I would still like to validate any input the user enters in the fields. Even though I have “required” set to false for both the fields, the validation seems to be behaving like they are required.

If someone is able to help me identify why the form validation isn’t behaving correctly, please let me know. I also thought it was necessary to include all the code for this form, so if anyone needs this truncated, let me know.

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you did was wrong. Put an id or a unique class on your button and try to trigger the error with click function. Forget about your countUnchecked function because it would trigger always once the page is loaded even if you still dont fill up the form yet. Try this

      $("#buttonid").click(function(){
   var n = $("input:radio[name=salutation]:checked").val();
   if(!n){                                   
       $("div").text("Please select a salutation.");
    }   
 });
    • 0