how do i show the message error without looping it?

user_12560046 0
Viewed 65

I need to create error message when someone blurs the field the message shows his error. everything is already working but the mistake I make is in every time I want to blur the message error is repeating itself so, how can I show the error message without looping this process.

custom.js

// Show input required error
var input = $(".tab-content input");
input.blur(function ()
{
    if (!$(this).val())
    {
        var attr = $(this).attr('required');
        if (attr == 'required')
        {
            var msg = $(this).attr('placeholder');
            if (msg != undefined)
            {
                $(this).after("<p class='error-message'>" + msg + ' is a required field !' + "</p>");
                console.log("error");
            }
        }
    }
    else
    {
        $(this).siblings("p.error-message").empty();
        $(this).siblings("p.error-message").css("display", "none");
    }
});

Edit:

register.html

{% extends 'base.html' %}
{% block title %} Register {% endblock %}

{% block body %}
<div class="register">
    <!-- Message Error -->
    {% if messages %}
        <div class="container">
            {% for message in messages %}
                {% if 'rm_account' in message.tags %}
                    <div class="alert alert-success text-success">
                        {{ message }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    <!-- Header -->
    <div class="header text-center">
            <h2>Register New Account</h2>
    </div>
    <!-- Signup -->
    <div class="container sign-in-up">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="wall">
                <br>
                <!-- Nav tabs -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="new">
                        <br>
                            <form method="post">
                            {% csrf_token %}
                                <div class="form-group">
                                    <div class="right-inner-addon">
                                    {% for field in form %}
                                        {% if form.errors %}
                                            {% for error in field.errors %}
                                            <div class="text-danger">
                                                <strong>{{ error }}</strong>
                                            </div>
                                            {% endfor %}
                                        {% endif %}
                                    {{ field }}
                                    {% endfor %}
                                    </div>
                                </div>
                            <hr>
                                <div class="tab-content">
                                    <div class="tab-pane fade in active text-center" id="pp">
                                        <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-plus"></i> Create Account</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    {% include 'base_footer.html' %}
{% endblock %}

enter image description here

jquery javascript
2 Answers

You can check if the input already has error message next to it and its not visible(i.e hidden) has you have use after(.. so the error will be get inserted after the input tag depending on this restrict the number of times same error message inserts to particular inputs or you just remove error-message instead of hiding using $(this).next("p.error-message").remove().

Demo Code :

// Show input required error
var input = $(".tab-content input");
input.blur(function() {

  if (!$(this).val()) {
    var attr = $(this).attr('required');
    if (attr == 'required') {
      var msg = $(this).attr('placeholder');
      if (msg != undefined) {
        //check if the next to this input i.e : p tag is not visible 
        if (!$(this).next("p.error-message").is(':visible')) {
          $(this).after("<p class='error-message'>" + msg + ' is a required field !' + "</p>");
          console.log("error")
        }
      }
    }
  } else {
    //hide next p tag
    $(this).next("p.error-message").empty();
    $(this).next("p.error-message").css("display", "none");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header text-center">
  <h2>Register New Account</h2>
</div>
<div class="container sign-in-up">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="wall">
        <br>
        <!-- Nav tabs -->
        <div class="tab-content">
          <div class="tab-pane fade in active" id="new">
            <br>
            <form method="post">

              <div class="form-group">
                <div class="right-inner-addon">

                  <div class="text-danger">
                    <strong></strong>
                  </div>
                  <input type="text" name="name" placeholder="name" required="required">
                  <div class="text-danger">
                    <strong></strong>
                  </div>
                  <input type="text" name="something" placeholder="abdscd" required="required">
                  <div class="text-danger">
                    <strong></strong>
                  </div>
                  <input type="text" name="somehting" placeholder="abdscddd" required="required">
                </div>
              </div>
              <hr>
              <div class="tab-content">
                <div class="tab-pane fade in active text-center" id="pp">
                  <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-plus"></i> Create Account</button>
                </div>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>
</div>

user_106064000

I think you should only add the error message when its not there yet. Also your if's are kinda useless exept for the first one. This is how your code would look like.

// Show input required error
var input = $(".tab-content input");
input.blur(function() {
    if (!$(this).val())
    {
        // If no text in error message element then add error message.
        if ($(this).siblings("p.error-message").text().length == 0) { 
            $(this).after("<p class='error-message'>" + msg + ' is a required field !' + "</p>");
            console.log("error");
        }
    } else {
        $(this).siblings("p.error-message").empty();
        $(this).siblings("p.error-message").css("display", "none");
    }
});

This is an solution with your code, but I think its an better practice to do these checks when you press the button create account. Also html itself has required parameters you can add to your inputfields, im not sure but if im correct they have error messages themself when its empty if you press the button. Anyway, its your project and you should choose. This is just some feedback/info.

EDIT:
First answer solution may be better check indeed.

// If
!$(this).next("p.error-message").is(':visible')

// instead of my if:
$(this).siblings("p.error-message").text().length == 0
user_115928360
Related