Question

根据我的理解this.form发送整个表单对象。我有这个表格

<form name ="bannerForm" method="post">
 <table>
     <tr>
         <td>Enter banner message</td>
         <td><input class="messagebannner" type="text" id="bannerMessage" name="bannerMessage" size="40" onblur="validateEmptyFields(this);"></td>
         <td><span name="messageBanner" id="messageBanner"></span></td>
     </tr>

我想动态更改span标记的值，我试图在validateEmptyField（）函数中没有对id进行硬编码。我怎样才能做到这一点？真的有可能吗？表格对象可以在这方面有所帮助吗？这是validateEmptyField（）函数：

function validateEmptyFields(inputField){
     if(inputField.value.length === 0){

//show error message in span
         return false
     }
    else {
     return true;
}
}

Answer 1

您可以像这样访问表单和表单字段。

//form acccess
document.forms["my_form_name"];
//fields access
document.forms["my_form_name"]["input_name"];

Answer 2

您的表单验证方法需要一些改进。

结帐this W3Schools page on JavaScript form validation。一旦你掌握了它的概念，这很容易。

在稍微调整之后，您的HTML和JavaScript应如下所示。

HTML：

<form id="bannerForm" name="bannerForm" method="post">
    <table>
        <tr>
            <td>Enter banner message</td>
            <td>
                <input class="messagebannner" type="text"
                    name="bannerMessage" size="40" onblur="validateBannerForm();" />
            </td>
            <td>
                <span id="messageBanner"></span>
            </td>
        </tr>
    </table>
</form>

JavaScript的：

function validateBannerForm() {
    var x = document.forms["bannerForm"]["bannerMessage"];
    if (x.value == null || x.value == "") {
        document.forms["bannerForm"]["messageBanner"].value = "This is an error message.";
        return false;
    }
}

我个人根本不喜欢这种验证方法，但它很容易理解并且似乎适合您的目的。在JavaScript和HTML表单方面，我会研究其他验证实践。

Answer 3

你可以做一些jQuery魔术（也可以不用但更容易）

$(inputField).parent().next().children('span').text(your text here);

Javascript：如何访问表单对象的字段

3 个答案: