Как я могу предотвратить автоматическое продвижение jQuery в соответствии с следующим шагом по умолчанию? [дублировать] ⇐ Jquery

[Anonymous]

Как я могу предотвратить автоматическое продвижение по умолчанию jQuery по умолчанию? Плагин для создания многоэтапной формы, но мне нужно управлять потоком формы на основе результата асинхронного действия (например, вызов API или запроса выбора). В частности, я хочу предотвратить автоматическое автоматическое продвижение шата до следующего шага до тех пор, пока не завершится вызов API, и я решу, продолжать или нет. < /P>
В настоящее время, когда я достигаю первого шага, я Хотите сделать вызов API, чтобы проверить определенные данные. Тем не менее, шаг автоматически переходит к следующему шагу, даже до завершения вызова API, что не является поведением, которое я ожидаю. > Я реализовал проверку формы с использованием плагина проверки jQuery, и обратный вызов Onstepchanging, чтобы предотвратить продвижение к следующему шагу, если форма недопустим. < /p>
Однако я не могу Для предотвращения автоматического развития шаги, когда необходима асинхронная операция (например, AJAX или вызов избранного), чтобы определить, должен ли пользователь продолжить. < /p>
Ожидаемое поведение: < /p>
Я хочу следующее поведение:
Когда пользователь нажимает «Далее». >
Если вызов API успешным и условия выполнены, пользователю должно быть разрешено перейти к следующему шагу. не встречаются, пользователя следует помешать перейти к следующему шагу. Продолжается автоматически, даже когда вызов API не завершен. Pre Class = "Snippet-Code-JS Lang-Js PrettyPrint-Override">

Код: Выделить всё

const initPolicyRenewalMotorForm = () => {
const form = $("#policy-renewal-motor");

// Initialize jQuery Validation
form.validate({
errorPlacement: function (error, element) {
error.appendTo(element.closest(".form-field"));
},
rules: {
IDNumberMotor: "required",
mobileNumberMotor: "required",
dateOfBirthMotor: "required",
disclaimerMotor: "required"
},
messages: {
IDNumberMotor: "Please enter your ID number.",
mobileNumberMotor: "Please enter your mobile number.",
dateOfBirthMotor: "Please enter your date of birth.",
disclaimerMotor: "You must agree to the terms."
}
});

/* Initialize jQuery Steps */
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
titleTemplate: '#index# #title#',
transitionEffectSpeed: 200,

labels: {
cancel: "Cancel",
current: "current step:",
pagination: "Pagination",
finish: "PAY",
next: "NEXT",
previous: "BACK",
loading: "Loading ...",
},

startIndex: 0,

onInit: function (event, currentIndex) {
// Initialize validation on init
form.validate();
},

onStepChanging: async function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
return true;
}

// Check if the form is valid
if (!form.valid()) {
return false;  // Block navigation if form is invalid
}

return true;
},

onFinishing: function (event, currentIndex) {
return form.valid();  // Ensure validation before finishing
},

onFinished: async function (event, currentIndex) {
// Handle finishing action (e.g., submit form or display summary)
}
});
}< /code>







[list]
[*]
[url=#steps-uid-0-h-0]
current step: 
1 Policyholder Details
[/url]

[*]
[url=#steps-uid-0-h-1]
2 Policy Details
[/url]

[*]
[url=#steps-uid-0-h-2]
3 Add Driver
[/url]

[*]
[url=#steps-uid-0-h-3]
4  Summary and Payment
[/url]

[/list]



[list]
[*][url=#previous]BACK[/url]
[*][url=#next]NEXT[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/794 ... he-next-st