为什么我的表单验证无效？

Question

I've searched everywhere for an answer to this and I really can't figure out what I'm doing wrong. I realise it's probably a stupid mistake but I'm absolutely racking my brains on this.

I've got a script that submits to a PHP file. The script when sent should validate to make sure the required fields are filled in and if they aren't, it should pop up a Javascript box to basically tell them they haven't filled in the correct fields. Unfortunately, at the minute, it just sends.

The code is as follows:

    <div id="formcontainer">
<div class="formcontent">
<h3>Fields marked (*) are required</h3>The amount of money that Affecting Real Change is able to raise is dependent on the generosity of donors and our volunteer's fantastic fundraising. All of the money raised goes towards project building materials. Without these funds we really wouldn't be able to do what we do.
</div>
    <form method=post enctype=multipart/form-data action=formurl.php onSubmit="return validatePage1();">

    <h3>Full Name (Insert as it appears on your passport)&nbsp;*</h3><p class="formfield"><input class=mainForm type=text name=field_1 id=field_1 size='40' value=''></p>

<h3>Your gender&nbsp;*</h3><select class=mainForm name=field_7 id=field_7><option value=''></option><option value="Male">Male</option><option value="Female">Female</option></select>   

<h3>Email Address&nbsp;*</h3><p class="formfield"><input class=mainForm type=email name=field_2 id=field_2 size=40 value=""></p>

    <h3>Phone Number&nbsp;*</h3><p class="formfield"><input class=mainForm type=text name=field_11 id=field_11 size='40' value=''></p>

    <h3>Indicate Trip & Date&nbsp;*</h3><p class="formfield"><input class=mainForm type=text name=field_3 id=field_3 size='40' value=''></p>

<h3>Please type any more info here&nbsp;*</h3><textarea class=message  name=field_5 id=field_5 rows=7 cols=40></textarea>

<h3>I have read your <a href="http://www.affectingrealchange.org/terms-and-conditions/" target="_blank">Terms and Conditions</a> and agree&nbsp;*</h3><select class=mainForm name=field_10 id=field_10><option value=''></option><option value="Yes">Yes</option><option value="No">No</option></select>

        <!-- end of this page -->

        <!-- page validation -->
        <SCRIPT type=text/javascript>

            function validatePage1()
            {
                retVal = true;
                if (validateField('field_1','fieldBox_1','text',1) == false)
 retVal=false;
if (validateField('field_2','fieldBox_2','email',1) == false)
 retVal=false;
if (validateField('field_3','fieldBox_3','textarea',1) == false)
 retVal=false;
if (validateField('field_5','fieldBox_5','textarea',1) == false)
 retVal=false;
if (validateField('field_7','fieldBox_7','menu',1) == false)
 retVal=false;
if (validateField('field_10','fieldBox_10','menu',1) == false)
 retVal=false;
if (validateField('field_11','fieldBox_10','menu',1) == false)
 retVal=false;

                if(retVal == false)
                {
                    alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                    return false;
                }
                return retVal;
            }

        </SCRIPT>

        <!-- end page validaton -->



        <li class="mainForm">
                        <br/><p class="submit"><input id="saveForm" class="submit" type="submit" value="Submit" /></p>
                </li>

            </form>

I realise that it's probably something really stupid, but I can't for the life of me figure out what it is.

Really, the form just needs to validate one field. The site it's being used on is getting lots of blank page submissions so just validating one field would be absolutely fine.

Any help would be fantastic!

Thanks Lewis

Answer 1

您可以在输入中添加必填项，即：

<input type="text" name="Pname" maxlength="50" value="" required aria-required=true />

Answer 2

您是否在任何地方都包含对“ validateField”的引用？

Answer 3

Can you show us your validateField function ? I think it's probably this function who is not working.

By the way, I think it's not very good to put the JS into the HTML like this, you should create a file you include like that :

<script src="js/validation.js"></script>

And I think, you could do something more global, using data in your HTML. By doing this you could have only one JS code for all you forms.

Answer 4

If a validateField call throws an exception, it'll bypass the return at the end of validatePage1 . Try enclosing the tests in a try/catch block to see what's going on, like

function validatePage1()
{
    retVal = true;
    try {
    if (validateField('field_1','fieldBox_1','text',1) == false)
        retVal=false;
    ...
    if (validateField('field_11','fieldBox_10','menu',1) == false)
    retVal=false;
    } catch (e) { alert(e); }

   if(retVal == false)
   {
        alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
   }
   return retVal;
}

Are you sure you don't have a typo -- Are all the fields you're testing actually defined on the page?