Question

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

Answer 1

不是特定于Django。它是一个前端Javascript框架Job。或者，如果您确定您的webapps的目标受众是最新的面向浏览器，支持HTML5，那么请转到HTML表单验证（source）。

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

Answer 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中提交之前检查验证从loading div

显示ajax-loader.gif

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

Django表单，在提交前检查验证。（HTML）

2 个答案:

Django表单，在提交前检查验证。 （HTML）

2 个答案:

Django表单，在提交前检查验证。（HTML）