Question 246405 in Html Question posted in
Some basic documentation can be found here.

Problem with HTML/CSS/JS Form. Not working properly

Here is my code:
https://codepen.io/raakh/pen/wvRqRGX

'use strict';

$(function() {
    $("input[type='password'][data-eye]").each(function(i) {
        var $this = $(this),
            id = 'eye-password-' + i,
            el = $('#' + id);

        $this.wrap($("<div/>", {
            style: 'position:relative',
            id: id
        }));

        $this.css({
            paddingRight: 60
        });
        $this.after($("<div/>", {
            html: 'Show',
            class: 'btn btn-primary btn-sm',
            id: 'passeye-toggle-'+i,
        }).css({
                position: 'absolute',
                right: 10,
                top: ($this.outerHeight() / 2) - 12,
                padding: '2px 7px',
                fontSize: 12,
                cursor: 'pointer',
        }));

        $this.after($("<input/>", {
            type: 'hidden',
            id: 'passeye-' + i
        }));

        var invalid_feedback = $this.parent().parent().find('.invalid-feedback');

        if(invalid_feedback.length) {
            $this.after(invalid_feedback.clone());
        }

        $this.on("keyup paste", function() {
            $("#passeye-"+i).val($(this).val());
        });
        $("#passeye-toggle-"+i).on("click", function() {
            if($this.hasClass("show")) {
                $this.attr('type', 'password');
                $this.removeClass("show");
                $(this).removeClass("btn-outline-primary");
            }else{
                $this.attr('type', 'text');
                $this.val($("#passeye-"+i).val());              
                $this.addClass("show");
                $(this).addClass("btn-outline-primary");
            }
        });
    });

    $(".my-login-validation").submit(function() {
        var form = $(this);
        if (form[0].checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.addClass('was-validated');
    });
});



var form = document.querySelector('.needs-validation');
if(form){
form.addEventListener('submit', function(event) {
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    form.classList.add('was-validated');
})
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
    <main role="main" class="container">
<form method="POST" action="/adminLogin"
    class="form-width form-horizontal main-form needs-validation"
    novalidate>
    <h3 class="form-title">Login</h3>
    <div class="form-group">
        <label>Email</label>
        <div class="input-group" id="idEmail">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
            </div>
            <input class="form-control" name="email" type="email" value=""
                id="email" required
                pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
                oninvalid="setCustomValidity('Email format is not correct or is not in English Language')"
                ;
                        onchange="try{setCustomValidity('')}catch(e){}">
            <div class="invalid-feedback">Email format is not correct or is
                not in English Language</div>
        </div>
    </div>
    <div class="form-group">
        <label>Password</label>
        <div class="input-group" id="">
            <input class="form-control" name="password" type="password" value=""
                id="password" required
                oninvalid="setCustomValidity('Password format is not correct or is not in English Language')"
                ;
                        onchange="try{setCustomValidity('')}catch(e){}">
            <div class="input-group-append">
                <span class="input-group-text"> <a href="#"
                    class="toggle_hide_password"><i class="fa fa-eye-slash"></i></a>
                </span>
            </div>
            <div class="invalid-feedback">Password format is not correct or
                is not in English Language</div>
        </div>
    </div>
    <input type="hidden" name="from" value=""> <input type="hidden"
        name="userType" value="1">
    <button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
<br><br>

The main problem is with detecting email format. I am not understanding either problem is with html/css/js or regex. Please help me to fix this issue

[email protected] working fine. email@email. is also works but the email@email is considered correct format instead of wrong format

Please help me to find out error

Best Regards

Tags:

2

Answers


  1. 0

    You need to escape some of the characters in the pattern, like [/{|}-]+ (so, here just the escaped chars). Remove the novalidate attribute from the form element and then use the build in validation.

    document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

document.forms.form01.addEventListener('input', e => {
  if(e.target.validity.valid){
    e.target.classList.remove('invalid');
  }
});
    input.invalid ~ div.invalid-feedback {
  display: block;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <main role="main" class="container">
    <form method="POST" name="form01" action="/adminLogin" class="form-width form-horizontal main-form needs-validation">
      <h3 class="form-title">Login</h3>
      <div class="form-group">
        <label>Email</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
          </div>
          <input class="form-control" name="email" type="text" pattern="^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$" data-message="Email format is not correct or is not in English Language" required>
          <div class="invalid-feedback">Email format is not correct or is not in English Language</div>
        </div>
      </div>
      <div class="form-group">
        <label>Password</label>
        <div class="input-group">
          <input class="form-control" name="password" type="password" required data-message="Password format is not correct or is not in English Language">
          <div class="input-group-append">
            <span class="input-group-text"><a href="#" class="toggle_hide_password"><i class="fa fa-eye-slash"></i></a></span>
          </div>
          <div class="invalid-feedback">Password format is not correct or is not in English Language</div>
        </div>
      </div>
      <input type="hidden" name="from" value=""> <input type="hidden" name="userType" value="1">
      <button type="submit" class="btn btn-primary btn-block">Login</button>
    </form>
  </main>
</body>
    Login or Signup to reply.
  2. 0

    Although your regex seems working, try using this one:

    /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/

    It is a regex for e-mail matching used by HTML5. Now, if You want to require ending .something, then replace * with +. Still, e-mails in general do not require Your limitations so maybe You should stick to the standard?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search