Как проверить данные формы перед тем как отправить на сервер?

Question

[Макс Жуков]

Я хочу чтобы страница перезагружалась, только когда я могу зарегистрироваться, а когда нет, то просто alert выводился с сообщение и страница не перезагружалась

html

<form id ="form-registration" method="POST" role="form">
	<div class="form-group">
	<label for="username">'. esc_html__('Input name','fashionpress') . ' <sup>*</sup></label>
	<input id="username" required titile="'.esc_html__('minimum 4 letters','fashionpress').'" pattern="[A-Za-zА-Яа-яЁё]{4,}" type="text" name="username" class="form-control" value="">
	</div>
    <div class="form-group">
    <label for="email">' . esc_html__('Input email','fashionpress') . '<sup>*</sup></label>
    <input id="email" required type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}" name="email" class="form-control" value="">
    </div>
	<div class="form-group">
	<label for="password">' . esc_html__('Input password','fashionpress') .'<sup>*</sup></label>
	<input id="password" required title="'.esc_html__('at least 8 characters','fashionpress').'" pattern="[A-Za-zА-Яа-яЁё0-9]{8,}" type="password" name="password" class="form-control" value="">
	</div>
	<div class="form-group">
	<label for="repeat-password">' . esc_html__('Repeat password','fashionpress') . '<sup>*</sup></label>
	<input required id = "repeat-password" title="'.esc_html__('at least 8 characters','fashionpress').'" pattern="[A-Za-zА-Яа-яЁё0-9]{8,}" type="password" name="return-password" class="form-control" value="">
	</div>
	<input type="submit" name="submit" id="buttonsubmit" class="btn btn-primary" value="' . esc_html__('Join','fashionpress') . '" />
	</form>

JS

$("#form-registration").submit(function() {
    validate = false;
    data = {
        action: 'form',
        login: $("#form-registration #email").val(),
        username: $("#form-registration #username").val()
    }
    $.post(fashionpress.ajaxurl, data, function(dataout) {
        if (dataout != '') {
            alert(dataout);
        } else {
            validate = true;
        }
    });
    return validate;
})

PHP

$loginbool= email_exists($_POST['login']);
$usernamebool=username_exists($_POST['username']);
if ($usernamebool) :
esc_html_e('This name is already registered', 'fashionpress' );
elseif ($loginbool):
esc_html_e('This email is already registered', 'fashionpress' );
endif;
wp_die();

Comments

[Артем]

preventDefault?

[Макс Жуков]

Артем, это тоже самое что return false сделать?

[Mikola-BLR]

Макс Жуков, Нет. preventDefault - это отмена действия , в данном случае отправки формы (которая и влечёт за собой перезагрузку страницы).

Вот примерно такой код вам нужен, если я правильно понял то, что вы пытаетесь сделать:

$("#form-registration").submit(function(e) {
    e.preventDefault();

    var data = {
        action: 'form',
        login: $("#form-registration #email").val(),
        username: $("#form-registration #username").val()
    };

    $.post(fashionpress.ajaxurl, data, function(dataout) {
        if (dataout) {
            alert(dataout);
        } else {
            location.reload();
        }
    });
});