Validating form using 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

您考虑使用HTML属性吗？在输入字段上，您可以设置required属性，并且无法将字段形式发送到其填充状态。另一种选择是在标记上使用patter属性并使用正则表达式来测试验证

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

看看你的代码，在js上，你需要采取一种方式＆＃34;：＆＃34;在＆＃34; false＆＃34;之后并用＆＃34;;＆＃34;

替换它

同样在标记中，您从未在表单上调用该函数，这就是为什么您从未运行该函数的原因。试试这个：

<强> 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>