Question

我一直在尝试使用java脚本来验证联系表单。我们的想法是在每个文本框上方添加一个段落标记，当单击提交按钮时，应该触发一个javascript函数。如果文本框为空，则“隐藏”类将从段落的类列表中删除，以便它可见问题是，第一次单击按钮时，函数只被触发一次。但如果我填写文本框并再次单击该功能不会被触发。任何人都可以帮我这个吗？注意：如果我使用getElementById，则不会触发该函数，并且编译器会转到服务器端函数btnSubmit_Click但是当使用getElementByName时，该函数仅按上述方式触发一次。

        <div id="contactForm" runat="server">
            <div class="control-group form-group">
                <div class="controls">
                    <p id="errname" class="hidden">You must insert your <b>name</b></p>
                    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" >
                </div>
            </div>              
            <div class="control-group form-group">
                <div class="controls">
                    <p id="erremail" class="hidden">You must insert your <b>email</b></p>
                    <input type="email" runat="server" class="form-control" id="txtemail" name="txtemail" placeholder="*Email" >
                </div>
            </div>
            <div class="control-group form-group">
                <div class="controls">
                    <p id="errmessage" class="hidden">You must insert a <b>message</b></p>
                    <textarea runat="server" rows="10" cols="100" class="form-control" id="txtmessage" name="txtmessage" placeholder="*Message" maxlength="999" style="resize:none"></textarea>
                </div>
            </div>
            <asp:Button ID="btnSubmit" runat="server"  OnClientClick="return myfun();" OnClick="btnSubmit_Click"  Text="Send Message" class="btn btn-primary btn-block" />
        </div>

和javascript函数是：

    function myfun() {
        document.getElementById("errname").classList.add('hidden');
        document.getElementById("erremail").classList.add('hidden');
        document.getElementById("errmessage").classList.add('hidden');

        var flag = true;
        if (!document.getElementsById("txtname").value) {
            document.getElementById("errname").classList.remove('hidden');
            flag= false;
        }

        if (!document.getElementsById("txtemail").value) {
            document.getElementById("erremail").classList.remove('hidden');
            flag= false;
        }

        if (!document.getElementsById("txtmessage").value) {
            document.getElementById("errmessage").classList.remove('hidden');
            flag = false;
        }
        if (flag == false) { return false;}

    }
</script>

Answer 1

通过添加clientIdMode =＆＃34; static＆＃34;来完成。到javascript函数中调用的文本框

                    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" clientIdMode="static">

Answer 2

你的JS永远不会回归真实。你有：

if(flag == false) {return false;}

但你永远不会告诉它返回真实。而不是上面的那一行，为什么不只是：

return flag;

由于如果出现错误，您将值从true更改为false，它将返回flag的值。

javascript函数只工作一次

2 个答案: