Javascript HTML表单返回空字段

我有一个带有几个字段的基本表单，我想在提交代码之前验证这些字段。但是，当我将表单数据传递给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>

但是，这不会触发警报框。如果我换成

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

此代码段将仅触发警报（“1”），然后结束。故障场景警报和警报（“2”）均未触发。想知道为什么吗？

关于此代码：

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

请注意，文本框没有您试图设置的id属性

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

更改以添加ID属性：

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

它将起作用。

对于此代码：

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

请注意，文本框没有您试图设置的id属性

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

更改以添加ID属性：

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

---

它会起作用。

这里列出了表单“name”-这对PHP更好。如果要按id拖动它，则需要指定id=“[your value here]”以使其工作。在标签中添加一个额外的字段

这里列出了表单“name”-这对PHP更好。如果要按id拖动它，则需要指定id=“[your value here]”以使其工作。在标记中添加一个附加字段

您试图通过元素的

ID

获取元素，但您没有为元素设置任何ID，因此需要添加

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

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

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');
    }
}

var allInputs=document.querySelectorAll（'form>input'）；
对于（var i=0；i您试图通过元素的
ID
获取元素，但是您没有为元素设置任何ID，因此需要添加

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



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

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');
    }
}

var allInputs=document.querySelectorAll（'form>input'）；
对于（var i=0；i将代码更改为
document.getElementByName（'book\u name'）
，或者如果要按ID选择，html应该如下所示

按名称属性检索元素：
document.getElementByName（'book\u name'）
参考：

按id属性检索元素：
document.getElementById（'book\u name'）
参考：
将您的代码更改为
文档。getElementByName（'book\u name'）
或者如果您想按ID选择，html应该如下所示

按名称属性检索元素：
document.getElementByName（'book\u name'）
参考：

按id属性检索元素：
document.getElementById（'book\u name'）
参考资料：
哦，我的天啊。我觉得自己像个傻瓜。我怎么没看到呢？非常感谢！我会尽快接受这个答案。每个人都会遇到这种情况。请帮个小忙？你为什么要使用新书？我建议不要使用文档。getElememtById（'book\u name'））.value噢，我的天啊。我觉得自己像个傻瓜。我怎么没看到呢？非常感谢！我会尽快接受这个答案。每个人都会遇到这种情况。请帮点忙？你为什么要使用新书？我建议不要使用document.getElememtById（'book_name'））.价值我不认为您可以直接参考表单Id…我不推荐it@BrianMains对不起，这只是我在java时代的一个习惯：（天哪，我感到很尴尬。问了这么愚蠢的问题。再次感谢你为我澄清了这件事。我不认为你可以直接参考表格Id…我不推荐你。）it@BrianMains对不起，这只是我在java时代的一个习惯：（天哪，我感到很尴尬。问了这么愚蠢的问题。再次感谢你帮我澄清这一点