JavaScript HTML表单验证不起作用

我试图使用javascript验证表单，但表单验证不起作用。不确定，它是否被路由到函数。这是html表单模式

<div class="modal-body form">
                <form action="#" id="form" class="form-horizontal" name="myForm" onsubmit="return validateForm()" ;>
                    <input type="hidden" value="" name="id" />
                    <div class="form-body">

                        <div class="form-group">
                            <label class="control-label col-md-3">Brand Name</label>
                            <div class="col-md-9">
                                <input required type="text" name="bname" id="brname" class="form-control" placeholder="Name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">Brand Origin</label>
                            <div class="col-md-9">
                                <input required type="text" name="origin" id="brorigin" class="form-control" placeholder="Origin">
                            </div>
                        </div>

                    </div>
                </form>

                <div class="modal-footer">
                    <input type="submit" id="btnSave" value="Submit" onclick="save()" class="btn btn-primary"></input>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>

            </div>

谢谢

---

编辑：表单模型中有一个问题。onclick事件侦听器将保存表单。当我在

$（document）.ready（function（）中移动函数时，会显示错误警报{

function

首次尝试提交表单时，它会将click event listener添加到submit按钮，但无法阻止表单提交。将click listener移出函数，并放弃函数。然后，从表单中删除

onsubmit

属性

$('#btnSave').click(function() {

        var brname = document.getElementById("brname").value;
        var brorigin = document.getElementById("brorigin").value;
        if (brname.length == 0)
        {
            window.alert("You must enter a name.");
            brname.focus();
            return false;
        }

        if (brorigin.length == 0)
        {
            window.alert("You must enter the origin country");
            brorigin.focus();
            return false;
        }
});

---

validateForm（）

的代码只有在您单击提交按钮btnSave时才会执行函数只需在单击时注册一个事件处理程序，但单击是在注册事件处理程序之前发生的。并且

validateForm

可能返回未定义的。尝试将validateForm的代码或放入

$（document）.ready（）

或直接放在函数中，不包含单击事件`

function validateForm()
{
        var brname = document.getElementById("brname").value;
        var brorigin = document.getElementById("brorigin").value;
        if (brname.length == 0)
        {
            window.alert("You must enter a name.");
            brname.focus();
            return false;
        }

        if (brorigin.length == 0)
        {
            window.alert("You must enter the origin country");
            brorigin.focus();
            return false;
        }

}

编辑： 即使

validateForm

返回

false

，也会调用

save（）

函数，因为您在提交按钮的

onclick

事件中调用该函数。

---

尝试在

validateForm

中调用

save（）

，如果

更新了这里的代码，请立即尝试

<div class="modal-body form">
                    <form action="#" id="form" class="form-horizontal" name="myForm">
                        <input type="hidden" value="" name="id" />
                        <div class="form-body">

                            <div class="form-group">
                                <label class="control-label col-md-3">Brand Name</label>
                                <div class="col-md-9">
                                    <input required type="text" name="bname" id="brname" class="form-control" placeholder="Name">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Brand Origin</label>
                                <div class="col-md-9">
                                    <input required type="text" name="origin" id="brorigin" class="form-control" placeholder="Origin">
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="modal-footer">
                        <input type="button" id="btnSave" value="Submit" class="btn btn-primary"></input>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>

                </div>



$('#btnSave').click(function()
                {

                    var brname =$('#brname').val()
                    var brorigin = $('#brorigin').val()
                    if (brname == '')
                    {
                        window.alert("You must enter a name.");
                        brname.focus();
                        return false;
                    }

                    if (brorigin == '')
                    {
                        window.alert("You must enter the origin country");
                        brorigin.focus();
                        return false;
                    }

            return true
                });


品牌名称
品牌起源
取消
$（'#btnSave'）。单击（函数（）
{
var brname=$（'#brname'）.val（）
var brorigin=$（'#brorigin'）.val（）
如果（brname=''）
{
window.alert（“必须输入名称”）；
brname.focus（）；
返回false；
}
if（brorigin==''）
{
window.alert（“您必须输入原产国”）；
brorigin.focus（）；
返回false；
}
返回真值
});
非常简单，请遵循此操作
是否尝试将“x.length==0”更改为“x.length==0”？是否尝试将提交按钮移动到表单标记内？请指定“表单验证不起作用”。到底出了什么问题？代码的预期结果是什么？我没有看到您调用
validateForm（）
。尝试将单击事件代码移出函数。将提交按钮移到表单标记内；打开onclick事件：“validateForm（）；save（）”；从validateForm（）中删除onclick事件；将onsubmit事件放在表单tagi上，已尝试将其直接放在函数中。它不起作用。是的，这样做起作用了…感谢您指出
save（）
函数它起作用了，但只起了一半作用。它确实显示了消息，但添加了条目。我尝试将其放在$（文档）中。就绪（函数（））它做了一半的工作…它显示了消息，但是空白表单被提交了…我也尝试删除函数，只有$$（“y.bTNSpple”）事件，这样它就不工作了。
<div class="modal-body form">
                    <form action="#" id="form" class="form-horizontal" name="myForm">
                        <input type="hidden" value="" name="id" />
                        <div class="form-body">

                            <div class="form-group">
                                <label class="control-label col-md-3">Brand Name</label>
                                <div class="col-md-9">
                                    <input required type="text" name="bname" id="brname" class="form-control" placeholder="Name">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Brand Origin</label>
                                <div class="col-md-9">
                                    <input required type="text" name="origin" id="brorigin" class="form-control" placeholder="Origin">
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="modal-footer">
                        <input type="button" id="btnSave" value="Submit" class="btn btn-primary"></input>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>

                </div>



$('#btnSave').click(function()
                {

                    var brname =$('#brname').val()
                    var brorigin = $('#brorigin').val()
                    if (brname == '')
                    {
                        window.alert("You must enter a name.");
                        brname.focus();
                        return false;
                    }

                    if (brorigin == '')
                    {
                        window.alert("You must enter the origin country");
                        brorigin.focus();
                        return false;
                    }

            return true
                });