Question

我有一个基本表单，包含几个要在提交代码之前验证的字段。但是，当我将表单数据传递给js时，它表示字段为空。有什么帮助吗？我是JS的新人，所以请耐心等待我。相关表格。这是一个切换表单显示的按钮，但我认为这对此没有任何影响。

<div id = "new_bk" style="display: none;">
    <form id = "New_Book" onsubmit = "javscript: return(FormValidate());">
        Book Name:<br>
        <input type="text" name="book_name">

        <br>
        Author name:<br>
        <input type="text" name="author_name">

        <br>
        ISBN:<br>
        <input type="text" name="ISBN">

        <br>
        Release Date:<br>
        <input type="text" name="release_date">

        <br>
        Price:<br>
        <input type="text" name="price">

        <br>
        Stock:<br>
        <input type="text" name="stock">

        <br>
        Sold:<br>
        <input type="text" name="sold">

        <br>
        Restock amount:<br>
        <input type="text" name="restock">

        <br>
        Rating:<br>
        <input type="text" name="rating">

        <br>
        Reviews:<br>
        <input type="text" name="reviews">

        <br>
        <input type="submit" value="Submit">
    </form>
</div>

和js

function FormValidate(){
    // if(document.getElementById("book_name").value.length>0){
    //     alert("ok");
    // }else{
    //     alert("not ok");
    // }
    alert("Name is: "  + document.getElementById('book_name').value);
    if(document.New_Book.book_name.value == ""){
        alert("sdkg");
        return false;
    }
    return true;
}

但是，这不会触发警告框。如果我把它切换到

alert(document.getElementById('book_name'));

它给了我一个空的。

非常感谢任何和所有帮助。哦，如果这很重要。 js位于外部文件中，该文件在html文件的body标记的末尾引用。

更新

表单现在正确发送数据。但现在发生了奇怪的事情。

alert("1");

if(document.New_Book.book_name.value == ''){
    alert("Input book name please");
    return false;
}

alert("2");

此代码段仅触发警报（＆＃34; 1＆＃34;）然后结束。无论是失败场景警报还是警报（＆＃34; 2＆＃34;）都不会被触发。任何想法为什么？

Answer 1

对于此代码：

alert(document.getElementById('book_name'));

请注意，文本框没有您尝试捕获的id属性。

<input type="text" name="book_name">

更改为添加ID属性：

<input type="text" id="book_name" name="book_name">

它会起作用。

Answer 2

你在那里列出了“名称”形式 - 这对PHP来说更好。如果你用id来拉它，你需要指定id =“[你的值在这里]”才能使它工作。在标记中添加其他字段

Answer 3

您正在尝试通过其<input type="text" name="book_name" id="book_name">获取元素，但您没有为元素设置任何ID，因此您需要添加

var allInputs = document.querySelectorAll('form > input');
for (var i = 0; i<allInputs.length;i++) {
    if (allInputs[i].value == ''){ 
        alert(allInputs[i].getAttribute('name') + ' is not filled');
    }
}

但是，我认为更聪明的是一次选择所有输入，然后循环通过它们进行验证。您可以使用querySelectorAll执行此操作，例如：

yyyy-MM-dd HH:mm:ss

Answer 4

将您的代码更改为document.getElementByName('book_name')，或者如果您想通过ID html选择，则应该看起来像这样<input type="text" id="book_name">

按名称属性检索元素：document.getElementByName('book_name') 参考：http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

按ID属性检索元素：document.getElementById('book_name') 参考：http://www.w3schools.com/jsref/met_document_getelementbyid.asp

HTML表单返回NULL字段

4 个答案: