Javascript在Firefox中不起作用

Question

我有一个用Chrome开发的PHP表单验证功能，现在无法在Firefox或Opera中使用。

该函数检查表单的一部分是否为空白，并显示和错误消息。 如果没有错误，则表单通过document.events.submit();提交document.events.submit();

码：

function submit_events()
        {

            //Check to see if a number is entered if the corosponding textbox is checked
            if (document.events.dj_card.checked == true && dj_amount.value==""){

                //Error Control Method
                //alert ('You didn\'t enetr an Amount for DJ\'s Card!');
                var txt=document.getElementById("error")
                txt.innerHTML="<p><font color=\"#FF0000\"> You didn\'t enetr an Amount for DJ\'s Card!</font></p>";                 
            window.document.getElementById("dj_card_label").style.color = '#FF0000';

            //Reset
            window.document.getElementById("company_amount_label").style.color = '#000000';
            window.document.getElementById("own_amount_label").style.color = '#000000';


            }else{

                document.events.submit();

            }

document.events.submit(); 确实可以在我所有的浏览器上运行，但是check语句不能运行。

如果未选中该框，则提交表单。 如果选中该框，则dj_amount.value中是否有数据都没有关系。 表单将不会提交，并且不会显示任何错误消息。

多谢你们。

Answer 1

这是我注意到的一些事情。 不确定是否可以解决问题，但是您需要修复其中一些问题； 其中一些只是观察。

• 没有声明也没有引用dj_amount； 我的猜测是你的意思是documents.events.dj_amount
• 你应该放一个; 在javascript中每个语句的末尾，包括var txt = document.getElementById("error")的末尾
• 您不需要对txt.innerHTML行中的字符串进行转义。 您只需要像引号一样转义，例如"\\""或'\\'' ，而不是"'"或'"'
• 您不需要引用window.document; 文件几乎可以在所有情况下使用

编辑 -正如Guffa指出的那样，FONT是HTML中一个古老且已弃用的元素。 这不是造成问题的原因，但是现代的标记方法意味着您不需要它。 考虑省略样式并将其应用于段落标签。

请参见下面的修改。

function submit_events() {
    //Check to see if a number is entered if the corosponding textbox is checked
    if (document.events.dj_card.checked == true && document.events.dj_amount.value == "") {
        //Error Control Method
        //alert ('You didn't enetr an Amount for DJ\'s Card!');
        var txt = document.getElementById("error");
        txt.innerHTML = "<p style=\"color: #FF0000;\"> You didn't enter an Amount for DJ's Card!</p>";
        document.getElementById("dj_card_label").style.color = '#FF0000';

        //Reset
        document.getElementById("company_amount_label").style.color = '#000000';
        document.getElementById("own_amount_label").style.color = '#000000';
    } else {
        document.events.submit();
    }
}

考虑使用Firebug，以便您可以查看并记录控制台javascript错误和消息：

http://getfirebug.com

Answer 2

为了使代码更改最少，只需在第一条if语句之前添加以下行：

var dj_amount = document.forms["events"].elements["dj_amount"];

但是，您的代码需要认真的优化，如果您有兴趣，请告诉我们。

编辑：这是优化。 首先是“小”东西-而不是现在拥有的“错误”容器，而只有这个：

<p id="error"></p>

现在，将此CSS添加到您的页面：

<style type="text/css">
    #error { color: #ff0000; }
</style>

这将处理红色，而不是在JS代码中进行硬编码，您现在可以从简单的CSS内控制颜色（以及其他所有颜色）。 这是正确的方法。

其次，现在您要提交表单以响应普通按钮的onclick事件。 更好的方法（至少在我看来是愚蠢的）是先具有“提交”按钮，然后覆盖表单onsubmit事件，如果无效，则取消该事件。 因此，首先您必须更改函数名称以使其更正确，然后在函数中具有正确的代码。 切入正题，这里是函数：

function ValidateForm(oForm) {
    //declare local variables:
    var oCardCheckBox = oForm.elements["dj_card"];
    var oAmoutTextBox = oForm.elements["dj_amount"];

    //checkbox cheched?
    if (oCardCheckBox.checked) {
        //store value in local variable:
        var strAmount = oAmoutTextBox.value;

        //make sure not empty:
        if (strAmount.length == 0) {
            ErrorAndFocus("You didn't enter amount for DJ's Card!", oAmoutTextBox);
            return false;
        }

        //make sure it's numeric and positive and not too big:
        var nAmount = parseInt(strAmount, 10);
        if (isNaN(nAmount) || nAmount < 1 || nAmount > 1000000) {
            ErrorAndFocus("DJ's Card amount is invalid!", oAmoutTextBox);
            return false;
        }
    }

    //getting here means everything is fine and valid, continue submitting.
    return true;
}

如您所见，如果出现问题，则return false否则返回true，表示可以提交表单。 要将其附加到表单，请具有以下表单标签：

<form ... onsubmit="return ValidateForm(this);">

而不是当前按钮有普通的提交按钮：

<input type="submit" value="Send" />

该代码将被自动调用。

第三，您可以看到该函数现在正在使用“ helper”函数来显示错误并集中显示“行为异常”元素-当您要验证其他元素并显示各种消息时，这使事情变得更加简单。 该函数是：

function ErrorAndFocus(sMessage, element) {
    var oErrorPanel = document.getElementById("error");
    oErrorPanel.innerHTML = sMessage;

    document.getElementById("dj_card_label").style.color = '#FF0000';
    document.getElementById("company_amount_label").style.color = '#000000';
    document.getElementById("own_amount_label").style.color = '#000000';
}

最后但并非最不重要的一点是，“新”代码除了检查其数量外，还确保金额为正数-很少有额外内容，这可以防止服务器端崩溃。

该函数中的其他所有内容几乎都是不言自明的：命名约定，使用局部变量...。最重要的是尽可能地减少冗余并保持代码可读。

希望其中至少有一定道理，可以随时要求澄清。 :)

Answer 3

我相信以上答案之一可以解决您的问题。 供将来参考，尽管它可能不适合您的项目，但请注意，当您使用jQuery之类的库时，编写表单和javascript反馈会更加容易和快捷。

Answer 4

您应该调出错误控制台，以便查看错误的实质。

缺少这些信息，我仍然可以猜测。 尝试一些不太古老的HTML代码； 对于使用innerHTML添加到页面的代码，解析器可能会很挑剔：

txt.innerHTML="<p style=\"color:#FF0000\"> You didn\'t enetr an Amount for DJ\'s Card!</p>";