Django 表单，在提交前检查验证。 (HTML)答案

【问题标题】：Django Form, check validate before submit. (HTML)Django 表单，在提交前检查验证。 (HTML)
【发布时间】：2014-04-06 18:49:58
【问题描述】：

对于常规的 html 表单，我可以使用 java 脚本在提交时验证输入，这意味着提交按钮仅适用于有效输入，因此不需要 http 响应。但是，我无法为 django 表单做同样的事情。 html 中的 Django 表单就是 {{form}}。例如 {{form.title}} 是标题的形式。所以我正在寻找一种在前端（在 HTML 中）验证 Django 表单的方法。只有有效的输入会被发布

【问题讨论】：

标签： html validation django-forms

【解决方案1】：

不是 Django 特定的。它是一个前端 Javascript 框架 Job。或者，如果您确定您的网络应用程序的目标受众都是面向最新浏览器的，支持 HTML5，那么请进行 HTML 表单验证 (source)。

如果您不想进行客户端验证并重新使用 Django 的验证代码，那么我建议您使用 ajax 序列化并提交表单。您可以获得 JSON 回复并使用 javascript 解析它，或者获取整个更新的表单（使用 Django 的模板引擎）并更新 DOM。如果您需要样品，请告诉我您选择哪种方法。希望这可以帮助。

【讨论】：

【解决方案2】：

包含 jquery 验证器

<script type="text/javascript" src="{% static 'js/jquery.validate.min.js' %}"></script>

在contact.html中

在您发送表单时加载 .gif

<div id="loadingDiv" class="hiddenClass">
<p><img src="{% static "images/ajax-loader.gif" %}" alt="loader" ><br/>Please wait... while we...<p>
</div>

contact.html 中的表单代码

<form method="post" action="/contact/send/"  id="contact_wrap">

<div class="name">
<label class="label">Name  <span class="required">*</span></label>
<input name= "firstname" id="firstname" class="inputtext"  type="text" maxlength="20" size="12" placeholder="First Name"/>
</span>
</div>

<-- your code -->

</form>

contact.html 中的提交按钮

<div class="button">
<input id="submitform" class="submitform" type="submit" name="submitform" value="Send" />
</div>

在contact.html中验证表单的脚本

<script>
$(function() {
    $( "#contact_wrap" ).validate({

        errorClass: "my-error-class", //apply a css class for error if you have style for valid
        validClass: "my-valid-class", //apply a css class for error if you have style for error

        rules: {
            firstname: {
                required: true
            },

        },
        messages: {
            firstname: {
                required: "Please enter your First Name."                         
            },
        },
    });

});
</script>

在contact.html中提交之前检查验证从加载 div 中显示 ajax-loader.gif

<script>
$( "#submitform" ).click(function() {
        if ($('#contact_wrap').valid()) $( "#loadingDiv" ).removeClass( "hiddenClass" ).addClass( "showClass" );
});
</script>

【讨论】：