'Validate form with 2 buttons independently with ajax and POST
I have a pre checkout woocommerce custom login form via shortcode:
<form method="post" class="woocommerce-form" id="login" action="<?php echo wc_get_checkout_url(); ?>">
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label class="font-weight-medium mb-1" for="reg_email">E-mailadres <span class="required">*</span></label>
<input type="email" class="woocommerce-Input" name="email" id="reg_email" autocomplete="email"
value="<?php echo esc_attr( $postfield ); ?>"/>
</p>
<div class="actions-container">
<button type="submit" name="method_guest">Afrekenen als gast</button>
<button type="submit" name="method_account">Account aanmaken</button>
</div>
<input type="hidden" value="nonce">
<?php wp_nonce_field( '/bestellen/', 'nonce' ); ?>
</form>
The form has an email field and 2 buttons, one button is to go to checkout as a guest, the other to go to checkout and create an account. I check if the user's email exists with email_exists and ajax via the remote jquery validation plugin method:
$("#login").validate({
onfocusout: "false",
rules: {
email: {
required: true,
email: true,
remote: {
url: ajaxurl,
data: {
action: 'check_email'
},
type: "post"
}
}
},
messages: {
email: {
required: "Enter an e-mailadres.",
email: "Enter a valid e-mailadres.",
remote: "Email already exists, login or continue as a guest."
}
},
errorElement: "span",
errorClass: "invalid",
});
I would like to let the user continue as a guest with an existing email adres only when you click the guest checkout button. But this is not possible because of the validation for the create account button. I've been trying to edit my php function so that the response is always true (email doesn't exist) when the value from guest checkout button is set. This also doesn't work however. Is there way to let users continue with an existing email adres and keep the validation for the account button? PHP function:
function check_email(){
$email = $_POST['email'];
if (email_exists( $email ) && isset($_POST['method_account'])){
$response = false;
} else {
$response = true;
}
wp_send_json($response);
wp_die();
}
add_action( 'wp_ajax_view_site_description', 'check_email' );
add_action( 'wp_ajax_nopriv_view_site_description', 'check_email' );
Only way I can think of is now to place the guest checkout button outside of the form, but then the email adres won't be posted.
Solution 1:[1]
Now you have email required, so you should change that. You don't need separate validation functions since we can just change the rules dynamically.
You can do it with some variable that will show which button was clicked. So it will be something like:
var accountMode;
$('button[name="method_guest"]').click(function() {
accountMode = false;
});
$('button[name="method_account"]').click(function() {
accountMode = true;
});
So now you can change your validation to:
email: {
required: accountMode,
...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Lothric |
