javascript - HTML 表单返回 NULL 字段

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");

这段代码只会触发alert("1")然后结束。失败场景警报和警报(“2”)都不会被触发。有什么想法吗？

Answer 1

对于此代码:

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

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

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

更改为添加 ID 属性:

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

它会起作用。