使用JavaScript验证表单

Question

I am trying to validate my form using an external JS file, I am wanting to make "your name", "your email" and "is the new page" a mandatory field which can not be left blank, I have been playing around with different JavaScript functions but just cant seem to get it to work, I feel like It could be a simple mistake I have made but just cant seem to figure it out. Would really appreciate it if someone could take a look and see if they can spot my mistake. Thanks This is my form:

        <form method="post" action="#">
            <h3 class="formHeader">Form Header</h3>
            <div class="formPod">
                <fieldset role="presentation">
                    <div class="formRow clearfix">
                        <span><label for="customerName">Your Name</label></span>
                        <input name="customerName" id="customerName" type="text" size="60" maxlength="200" />
                    </div>
                    <div class="formRow clearfix">
                        <span><label for="customerEmail">Your Email</label></span>
                        <input name="customerEmail" id="customerEmail" type="text" size="60" maxlength="200" />
                    </div>
                    <div class="formRow clearfix">
                        <fieldset>
                            <legend>Is the new page</legend>
                            <div>
                                <input type="radio" name="radio" id="radioEasier" value="easier" />
                                <span><label for="radioEasier">Easier to use</label></span>
                            </div>
                            <div>
                                <input type="radio" name="radio" id="radioHarder" value="harder" />
                                <span><label for="radioHarder">Harder to use</label></span>
                            </div>
                            <div>
                                <input type="radio" name="radio" id="radioSame" value="same" />
                                <span><label for="radioSame">About the same</label></span>
                            </div>
                        </fieldset>
                    </div>
                    <div class="formRow clearfix">
                        <span>
                            <label for="comments">Comments</label>
                            <label for="comments" id="charsLeft">(300)</label>
                        </span>
                        <textarea name="comments" id="comments" rows="4" cols="40"></textarea>
                    </div>
                </fieldset>
                <div class="actionRow clearfix">
                    <div class="btn">
                        <input type="submit" value="Submit" />
                    </div>
                </div>
            </div>
        </form>

Here is the external JavaScript file I have been playing with to try get the validation to work, starting with the customerName.

<script type="text/javascript">

function checkForBlank(){
    if (document.getElementById('customerName').value ==""){
        alert('Please enter a name');
        return false:
    }



}

</script>

Thanks.

Answer 1

You consider using HTML attributes? on the input field you can set the required atribute and the field form wont be able to be sent untill its filled. another option is to use the patter attribute on the markup and use regex to test the validation

---

http://www.w3schools.com/tags/att_input_required.asp http://www.w3schools.com/tags/att_input_pattern.asp

---

Looking at your code, on the js, you need to take a way the ":" after the "false" and replace it with a ";"

also in the markup, you never called the function on the form submit thats why you never got the function running. try this:

HTML

<form method="post" action="#">
    <h3 class="formHeader">Form Header</h3>
    <div class="formPod">
        <fieldset role="presentation">
            <div class="formRow clearfix">
                <span><label for="customerName">Your Name</label></span>
                <input name="customerName" id="customerName" type="text" size="60" maxlength="200" />
            </div>
            <div class="formRow clearfix">
                <span><label for="customerEmail">Your Email</label></span>
                <input name="customerEmail" id="customerEmail" type="text" size="60" maxlength="200" />
            </div>
            <div class="formRow clearfix">
                <fieldset>
                    <legend>Is the new page</legend>
                    <div>
                        <input type="radio" name="radio" id="radioEasier" value="easier" />
                        <span><label for="radioEasier">Easier to use</label></span>
                    </div>
                    <div>
                        <input type="radio" name="radio" id="radioHarder" value="harder" />
                        <span><label for="radioHarder">Harder to use</label></span>
                    </div>
                    <div>
                        <input type="radio" name="radio" id="radioSame" value="same" />
                        <span><label for="radioSame">About the same</label></span>
                    </div>
                </fieldset>
            </div>
            <div class="formRow clearfix">
                <span>
                    <label for="comments">Comments</label>
                    <label for="comments" id="charsLeft">(300)</label>
                </span>
                <textarea name="comments" id="comments" rows="4" cols="40"></textarea>
            </div>
        </fieldset>
        <div class="actionRow clearfix">
            <div class="btn">
                <input type="submit" value="Submit" onclick="checkForBlank();" />
            </div>
        </div>
    </div>

---

js

<script type="text/javascript">
    function checkForBlank(){
        if (document.getElementById('customerName').value === ""){
            alert('Please enter a name');
            return false;
        }
    }
</script>