how do I stop a email validation pop-up from appearing when I click submit?

user_14010711 0
Viewed 468

So I managed to get a Javascript code that checks if the email is valid. So if you write aa@bb.com it's valid but if it's aa or aa@ or aa@bb. then it's not valid because it doesn't follow the pattern that I assign it to be in order to be valid. The thing is, I'm using Boostrap Form and if I click submit it accepts the email with the wrong pattern. How do I stop this? I still want to use Bootstrap because of the CSS.

$("#submit").click(function() {
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();

  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (email !== /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else {
    swal({
      title: "Good job!",
      text: "You're subscriptions has been registered",
      icon: "success",
      button: "Awesome!",
    });
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

forms html javascript
3 Answers
  • Check for user entered email correctness like this !emailPattern.test(email)
  • If all are ok, manually submit the form
  • Prevent the default submit event, as you want to validate the fields

var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

$("#submit").click(function(event) {
  event.preventDefault();
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();

  if (name == '' || email == '') {
    console.log("Empty fields error");
  } else if (!emailPattern.test(email)) {
    console.log("Email pattern error");
  } else {
    console.log("Success");
    $('#testForm').submit(); // Here submit the form
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

user_85939830

HTML5 has good (and supported) browser side validation on submit for <input> types like email.
And you used it

<input type="email" name="email" id="emailaddress" class="form-control" required/>

The problem is <button type="submit">

Html validation needs <input type="submit"> because <button> is only empty decoration, not a handler. With <input type="submit"> html checks the inserted value and if required field is blank or if email is not an email address it will not be submitted,

JavaScript reads type="submit" - so, let's move on to submit when it asks!
For javascript change button type or give a name="check" instead of type - button doesn't need any type

you may add css colours for css validation (keep the order)

input:invalid{ background: red}
input:invalid:focus{ background: yellow;}
user_140125420

this is what I did. Thank you all for your help!

$("#submit").click(function(){
    var name = $("#fullname").val();
    var email = $("#emailaddress").val();
    var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   
    if(name == '' || email == ''){
        swal({
            title: "Empty Fields!",
            text: "Please check the missing fields",
            icon: "warning",
            button: "Ok, thank you",
        });  
    }
    else if(!emailPattern.test(email)){
        swal({
            title: "Invalid Email!",
            text: "Please write a valid email address",
            icon: "warning",
            button: "Ok, thank you",
        }); 
        event.preventDefault();
    }
    else{
        swal({
            title: "Good job!",
            text: "You're subscriptions has been registered",
            icon: "success",
            button: "Awesome!",
        });
        $('#testForm').submit();
    };
});
user_140107110
Related