如何使用 javascript 来验证表单？

Question

我正在尝试构建一个 Django 表单。而我试图实现的javascript逻辑是，如果输入的表单值不为空，则提交表单。但是，我不确定如何获取 {{form.value}} 的 id。

    <form id = "form1" action="." method="POST">{% csrf_token %}    

    <div class=".col1" style="float:left;vertical-align: middle;">          

        {{ form.region }}

        {{ form.operator }}
    </div>

    <div class="col-xs-2 style="vertical-align: middle;">
        {{ form.value }}
    </div>

    </form>


function SubmitForm1(){

if(document.getElementById( {{Form.Value}} ).value != ""){
    document.getElementById("form1").submit();
}

}

Answer 1

您的问题的根源是您将在 服务器 端处理的 django 模板中的代码与您在 javascript 中处理的代码混合在一起，该代码在 客户端（浏览器）端。存在于服务器端的变量名在浏览器中以不同的方式存在。在 javascript 中，您只能使用模板已呈现到发送到浏览器的 HTML 输出中的元素。

在 django 表单的情况下，您的表单字段通常会以 id_ + 字段名称的 id 呈现。所以：

document.getElementById("id_region").value
document.getElementById("id_operator").value
document.getElementById("id_value").value

..etc，将为您提供表单字段的值。

如果您在视图中对 Form 构造函数使用 prefix= 参数，例如：

myform = MyFormClass(prefix='form1')

然后前缀 (form1)，后跟破折号 -，将被添加到该表单中所有字段的字段名称之前：

 document.getElementById("id_form1-value").value 

如果您不确定表单中某个字段的名称或 ID，您可以随时在浏览器中执行“查看源代码”或“检查元素”以查看 html 文档中的内容。

Answer 2

使用onsubmit事件，如果返回false则提交会取消

示例： JS：

function validateForm() {
   var x = document.forms["form1"]["region"].value;
   if (x == "") {
    alert("region must be filled out");
    return false;
   }
}

HTML：

<form id = "form1" action="." method="POST" onsubmit="return validateForm()">

在JavaScript Form Validation上查看更多信息

Answer 3

在您放置在上面的代码中，您应该知道方法 .getElementById 需要传递一个 html 标记属性。请注意 div 标签上的id="form-value" 属性：

<div id="form-value" class="col-xs-2 style="vertical-align: middle;">
    {{ form.value }}
</div>

还有 javascript getElementById("form-value"):

function SubmitForm1(){
  if(document.getElementById("form-value").value != ""){
      document.getElementById("form1").submit();
  }
}

你可以在这里查看 w3cschools.com: HTML DOM getElementById() Method