Question

我的表单很大，有很多字段，其中大多数是必填字段。所以我想显示弹出警报消息，请填写必填字段。

 <input name="fname" id="fname" type="text" class="form-control" required>

我也在该特定字段下方显示了通常的消息，我需要类似“提交点击”的操作

 If (some fields required field error got triggered )
      {
       show alert pop-up message ;
      }

我是这个东西的新手。

Answer 1

<form class="post-comment-form" method="POST">
      {% csrf_token %}
      {% if form.errors %}
          {% for error in form.non_field_errors %}
              {{ error }}
          {% endfor %}
  {% endif %}

<div class="form-row">              
  <div class="form-item half blue">
    <label for="id_name"  class="rl-label" >Name</label>
    {{ form.name}}
  </div>

  <div class="form-item half blue">
    <label for="id_email" class="rl-label" >Email</label>
    {{ form.email}}
  </div>              
</div>

<div class="form-row">             
  <div class="form-item blue">
    <label for="id_comment"  class="rl-label">Comment</label>
    {{ form.comment }}
  </div>
</div>

<button type="submit" class="save-button">Submit</button>

使用javscript进行验证很容易被绕开，因为它发生在客户端。

Answer 2

尝试一下

<form onsubmit="myFunction()">
<input name="fname" id="fname" type="text" class="form-control" required>
<form>

使用以下功能检查字段

function myFunction() {
var fname=document.getElementById('fname').value;
if(!fname)
{
    alert("please fill required field");
}
}

您可以通过||来检查多个字段是否符合条件。标志。例如，您有2个提交的fname和lname。您可以通过if（！fname ||！name）

Answer 3

您需要在每个必填字段下方显示总体警报以及单个错误消息。

要使用jQuery，

    <form>
    <input name="fname" id="fname" type="text" class="form-control validateclass" required>
    <span class="spnError"></span>
    <input name="lname" id="lname" type="text" class="form-control validateclass" required>
    <span class="spnError"></span>
    <input id="btnClick" type="button" value="Submit Form"/>
    </form>


    <script type="text/javascript">
        $(function () {
         $("#btnClick").click(function()
         {
          $(".validateclass").each(function() {
          var fieldValue =$(this).val();
          if(fieldValue == null || fieldValue == "")
          {             
            $(this).next().css( "color", "red" ).text("Field is required");    
          }
          else
          {
           $(this).next().text(""); 
          }
        });
     });                        
   });
  </script>

如何知道是否触发了必填字段验证？

3 个答案: