Вы всегда можете перехватить отправку формы и обработать ее вручную. На самом деле это то, что вы должны делать в любом случае, если хотите заранее проверить поля формы.
Логика довольно проста. Вы присоединяете к форме прослушиватель onsubmit
. Запретите автоматическую отправку, позвонив на событие preventDefault()
. Затем соберите значения из всех полей, выполните проверку (, если электронная почта имеет правильный формат, если совпадают пароли и т. Д. ), добавьте произвольные сопутствующие свойства к объекту и отправьте все это на сервер. через ajax отправьте запрос.
Поскольку вы задаете такой вопрос, я порекомендую вам использовать библиотеку JS, чтобы облегчить задачу, jQuery
идеально подходит для такого случая:
$('#myForm').on('submit', function(e) {
e.preventDefault();
const $form = $(this);
const method = $form.attr('method');
const action = $form.attr('action')
const fields = $form.serializeArray();
fields.push({
name: 'username',
value: 'myUsername'
})
const queryStr = $.param(fields);
$[method](action, queryStr)
.done(function() {
// submission was successful - do something, refresh page for exmaple
})
.fail(function() {
// submission failed
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm" method="post" action="/handle.php">
My name is: <input type="text" name="fname" /><br />
<label for="agree">I agree</label> <input type="checkbox" name="agree" value="1" /><br />
<button type="submit">Submit</button>
</form>
Конечно, /handle.php
- это фальшивая конечная точка, поэтому отправка здесь явно не сработает.