jQuery Ajax Email Validator

Question

I have a simple form for a person to fill in their email address. My Ajax script is set to check this address with the database and validate if it exists or not. That step works but I'm stuck on getting the form to submit if the email doesn't exist.

This is my HTML

<form action="user_add.php" method="post" id="addform">
  <input
    type="text"
    class="form-control"
    name="email"
    id="email"
    required
    value=""
  />
  <a href="javascript:void(0);" onclick="check()"> Check </a>
</form>

This is my JS

function check() {
  $.ajax({
    url: 'checkusers.php',
    data: {
      email: $('#email').val()
    },
    type: 'POST',
    dataType: 'json',
    success: function (data) {
      if (data == true) {
        alert('Please note: A user with this email address already exists.')
        return false
      } else if (data == false) {
        //return true;  --- this doesn't work
        //$('form').submit(); --- this doesn't work
        $('form').trigger('submit') // --- this doesn't work
      }
    },
    error: function (data) {
      //error
    }
  })
}

What am I doing wrong here?

Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — freedomn-m, Aug 11 '21 at 09:24
@KIKOSoftware Yes, I tried that as well but it doesn't work. — Alton, Aug 11 '21 at 11:50
@freedomn-m I'm getting the right response back on the call. It's just not triggering the form submit. — Alton, Aug 11 '21 at 11:52
Ah - thanks for clarifying - you want: `$('form')[0].submit();` - note the *[0]* — freedomn-m, Aug 11 '21 at 12:58
An alternative to `$('form')[0].submit();` should be `$('form:first').submit();`. — KIKO Software, Aug 11 '21 at 13:30
@KIKOSoftware no - that would call the jquery submit, `$(..)[0].submit()` will call the javascript/DOM submit. They're not the same method and OP is already trying (and failing) with the jquery submit. `$('form:first')`->jquery object, `$('form')[0]`->DOM node — freedomn-m, Aug 11 '21 at 13:55
@freedomn-m I've used `$('form')[0].submit();` but now I get `Uncaught TypeError: $(...)[0].submit is not a function` in the console. — Alton, Aug 11 '21 at 14:13

score 1 · Answer 1 · answered Aug 11 '21 at 08:57

1

Using regular expressions is probably the best way.

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}
function check(){  
  var email = $('#email').val();                  
  if (validateEmail(email)) {
    $.ajax({
        url: "checkusers.php",
        data: {
            'email' : email 
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            if(data == true) {
                alert('Please note: A user with this email address already exists.');
                return false;
            }
            else if(data == false) {
                //return true;  --- this doesn't work
                //$('form').submit(); --- this doesn't work
                $('form').trigger('submit'); // --- this doesn't work
                
            }
        },
        error: function(data){
            //error
        }
    });
  } else {
    // error email not valid
  }
}

answered Aug 11 '21 at 08:57

Kaushal Patel

259
2
7

This doesn't address OPs issue and in fact repeats it (`return false` from `success:` does nothing). OP is not asking how to validate the email format (which is notoriously impossible via regex as easy to find valid email addresses that don't pass). – freedomn-m Aug 11 '21 at 09:23
Yes, this unfortunately doesn't address my issue. In the console I can see my php/json is returning a false value for "data" as it should but the trigger isn't working. – Alton Aug 11 '21 at 09:56
Try to add submit button, with display: none and trigger click on this submit button – Prashant Aug 11 '21 at 11:19
@Prashant Can you please elaborate? If the button is hidden, how must I trigger the click if it can't be clicked on? – Alton Aug 11 '21 at 11:51
It can be triggered, even if it is not visibile on browser – Prashant Aug 12 '21 at 11:23

score 0 · Accepted Answer · answered Aug 12 '21 at 05:53

Thank you to everyone for your input. I had a stray submit button higher up on the page I was working on

<input type="submit" id="submit" name="submit" value="Submit" class="btn btn-primary">

When I took this out, the following bit worked:

$('form').trigger('submit');

jQuery Ajax Email Validator

2 Answers2