Javascript 引导程序4验证在必填字段中无法正常工作
我使用Bootstrap4及其验证类做了一个很好的表单。 不幸的是，当我单击submit按钮时，即使我让id为“collaborator name”和“collaborator email”的IPUT清空，提交过程也会定期进行。 输入的边框会定期变为红色或绿色，但提交过程不会停止。 这是我的html表单：Javascript 引导程序4验证在必填字段中无法正常工作,javascript,jquery,validation,bootstrap-4,Javascript,Jquery,Validation,Bootstrap 4,我使用Bootstrap4及其验证类做了一个很好的表单。 不幸的是，当我单击submit按钮时，即使我让id为“collaborator name”和“collaborator email”的IPUT清空，提交过程也会定期进行。 输入的边框会定期变为红色或绿色，但提交过程不会停止。 这是我的html表单： <form id="collaborator-send-form" method="POST" class
<form id="collaborator-send-form" method="POST" class="needs-validation" novalidate>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="header-title">Dati anagrafici</h4>
<hr>
<div class="form-group mb-1">
<label class="text-danger">Nome *</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-name" id="collaborator-name" required>
</div>
</div>
<div class="form-group mb-1">
<label>Cognome</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-surname" id="collaborator-surname">
</div>
</div>
<div class="form-group mb-0">
<label class="text-danger">Email *</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="email" class="form-control" name="collaborator-email" id="collaborator-email" required>
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Residenza</h4>
<hr>
<div class="form-group mb-1">
<label>Città</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-city" id="collaborator-city">
</div>
</div>
<div class="form-group mb-1">
<label>CAP</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-postal-code" id="collaborator-postal-code">
</div>
</div>
<div class="form-group mb-1">
<label>Provincia</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-province" id="collaborator-province">
</div>
</div>
<div class="form-group mb-0">
<label>Indirizzo</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-address" id="collaborator-address">
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Riferimenti per il contatto</h4>
<hr>
<div class="form-group mb-1">
<label>Cellulare</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-mobile-phone" id="collaborator-mobile-phone">
</div>
</div>
<div class="form-group mb-1">
<label>Cellulare 2</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-mobile-phone-two" id="collaborator-mobile-phone-two">
</div>
</div>
<div class="form-group mb-1">
<label>Telefono</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-telephone" id="collaborator-telephone">
</div>
</div>
<div class="form-group mb-1">
<label>Telefono 2</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-telephone-two" id="collaborator-telephone-two">
</div>
</div>
<div class="form-group mb-0">
<label>Skype</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-skype" id="collaborator-skype">
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Dati di nascita</h4>
<hr>
<div class="form-group mb-1">
<label>Data di nascita</label>
<div class="input-group">
<input type="date" class="form-control" name="collaborator-born-date" id="collaborator-born-date">
</div>
</div>
<div class="form-group mb-1">
<label>Luogo di nascita</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-born-place" id="collaborator-born-place">
</div>
</div>
<div class="form-group mb-1">
<label>Cap</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-born-postal-code" id="collaborator-born-postal-code">
</div>
</div>
<div class="form-group mb-0">
<label>Provincia</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-born-province" id="collaborator-born-province">
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title text-danger">Correzioni segnalate dall'operatore</h4>
<hr>
<div class="form-group mb-0">
<textarea class="form-control" rows="5" name="collaborator-corrections" id="collaborator-corrections"></textarea>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h4 class="header-title">Contratto</h4>
<hr>
<div class="form-group mb-1">
<label>Tipo contratto *</label>
<div class="input-group">
<select class="custom-select" name="collaborator-contract-type" id="collaborator-contract-type" required>
<option></option>
<option value="1">Ricevuta</option>
<option value="2">Partita iva</option>
<option value="3">Estero unione europea</option>
</select>
</div>
</div>
<div class="form-group mb-1">
<label>Cittadinanza</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-citizenship" id="collaborator-citizenship">
</div>
</div>
<div class="form-group mb-1">
<label>Codice fiscale</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-fiscal-code" id="collaborator-fiscal-code">
</div>
</div>
<div class="form-group mb-0">
<label>Partita iva</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-vat" id="collaborator-vat">
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Pagamenti</h4>
<hr>
<div class="form-group mb-1">
<label>Pagamento</label>
<div class="input-group">
<select class="custom-select" name="collaborator-payment" id="collaborator-payment">
<option value="0"></option>
<option value="1">Bonifico bancario</option>
<option value="2">Postepay</option>
<option value="3">Paypal</option>
</select>
</div>
</div>
<div class="form-group mb-1">
<label>Iban</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-iban" id="collaborator-iban">
</div>
</div>
<div class="form-group mb-1">
<label>Codice swift</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-swift" id="collaborator-swift">
</div>
</div>
<div class="form-group mb-1">
<label>Postepay</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-postepay" id="collaborator-postepay">
</div>
</div>
<div class="form-group mb-0">
<label>Paypal</label>
<div class="input-group">
<input type="text" class="form-control" name="collaborator-paypal" id="collaborator-paypal">
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Note</h4>
<hr>
<div class="form-group mb-0">
<textarea class="form-control" rows="5" name="collaborator-notes" id="collaborator-notes"></textarea>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Stato collaboratore</h4>
<hr>
<div class="form-group mb-1">
<div class="input-group mb-1">
<input type="checkbox" value="1" name="collaborator-state" id="collaborator-state" class="switch-coll-red" data-plugin="switchery">
<label for="collaborator-state" class="text-danger ml-1" > Collaboratore non attivo </label>
</div>
<div class="input-group mb-1">
<input type="checkbox" value="1" name="collaborator-coordinator" id="collaborator-coordinator" class="switch-coll-blue" data-plugin="switchery">
<label for="collaborator-coordinator" class="text-primary ml-1"> Coordinatore </label>
</div>
<div class="input-group mb-1">
<input type="checkbox" value="1" name="collaborator-contact" id="collaborator-contact" class="switch-coll-blue" data-plugin="switchery">
<label for="collaborator-contact" class="text-primary ml-1"> Contatto </label>
</div>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<div class="card-body">
<h4 class="header-title">Valutazione tecnica</h4>
<hr>
<div class="form-group mb-1">
<div class="input-group">
<select class="custom-select" name="collaborator-ranking" id="collaborator-ranking">
<option value="0"></option>
<option value="1">Scartato</option>
<option value="2">Sufficiente</option>
<option value="3">Buono</option>
<option value="3">Ottimo</option>
</select>
</div>
</div>
<div class="form-group mb-0">
<label>Dettaglio sulla valutazione</label>
<textarea class="form-control" rows="5" name="collaborator-ranking-notes" id="collaborator-ranking-notes"></textarea>
</div>
</div> <!-- end card-body -->
</div> <!-- end card -->
</div> <!-- end col -->
</div>
<div class="d-flex justify-content-end mb-3 mr-3">
<button type="submit" id="collaborator-button" name="collaborator-button" class="btn btn-primary btn-lg width-xl">Invia</button>
</div>
</form>
<!-- end row -->
$("#collaborator-send-form").on('submit', function(e){
const id = $('#collaborator-id').val();
let values = {'id': id};
$.each($('form').serializeArray(), function(i, field) {
values[field.name] = field.value;
});
if ($('#collaborator-coordinator').is(":checked")) {
values['collaborator-coordinator'] = 1;
} else {
values['collaborator-coordinator'] = 0;
}
if ($('#collaborator-state').is(":checked")) {
values['collaborator-state'] = 1;
} else {
values['collaborator-state'] = 0;
}
if ($('#collaborator-contact').is(":checked")) {
values['collaborator-contact'] = 1;
} else {
values['collaborator-contact'] = 0;
}
//my custom patch to stop the submission
if (values['collaborator-email'] === '' || values['collaborator-name'] === '' || values['collaborator-contract-type'] === '' || values['collaborator-email'].indexOf('@') === -1) {
return false;
}
//then the ajax call