Convalida un modulo di prenotazione con più di un record utente

Devo convalidare il mio modulo usando jQuery o JavaScript quando la pagina viene inviata.

Le condizioni per convalidare il mio modulo sono:

  • Nome, età e indirizzo email del primo passeggero sono obbligatori.
  • Se l’utente inserisce altri nomi di lista da 2 a 10 passeggeri, dovrebbe essere obbligatorio aggiungere gli ID di età ed e-mail dei passeggeri aggiuntivi.
  • Gli ID e-mail di tutti i passeggeri devono essere unici e validi.
  • L’utente deve accettare i termini e le condizioni.

Ecco il mio HTML.

MaleFemale
MaleFemale
MaleFemale
MaleFemale
MaleFemale
MaleFemale
MaleFemale
MaleFemale
MaleFemale
MaleFemale

L’ho fatto individualmente per ogni passeggero. Non ho codice per controllare gli ID e-mail univoci.

Possiamo riformulare i quattro requisiti come segue:

  • È necessario inserire almeno un nome.

  • Per ogni nome che è stato inserito, è necessario specificare l’età e l’indirizzo e-mail.

  • Ci deve essere un indirizzo email univoco per ogni nome.

  • La casella di controllo “Termini e condizioni” deve essere selezionata.

Lo snippet qui sotto convalida tutti questi requisiti. Si noti quanto segue.

  • L’HTML contiene una singola voce che viene duplicata quando viene caricata la pagina. La variabile globale numEntries specifica il numero desiderato di voci nel modulo.

  • Utilizziamo entryCount per tenere traccia di quanti nomi sono stati inseriti nel modulo.

  • Un hash viene utilizzato per memorizzare il nome corrispondente a ciascun indirizzo email. Cerchiamo ogni nuovo indirizzo email in questo hash per vedere se un nome è già stato assegnato.

 var numEntries = 10; // Remove whitespace from beginning and end of string. function strip(s) { return s.replace(/^\s+|\s+$/, ''); } window.onload = function () { // Make ten entries and store them in an array. var form = document.getElementById('entryForm'), entry = form.getElementsByTagName('div')[0], nextSibling = entry.nextSibling, entries = [entry]; for (var i = 1; i < numEntries; ++i) { var newEntry = entry.cloneNode(true); form.insertBefore(newEntry, nextSibling); entries.push(newEntry); entry = newEntry; } // Make it easy to look up field values for each entry. entries.forEach(function (entry) { ['name', 'age', 'email', 'phone'].forEach(function (field) { entry[field] = entry.getElementsByClassName(field)[0]; }); }); // Attach a validation function to the form submission button. document.getElementById('submitButton').onclick = function () { if (!document.getElementById('agreementBox').checked) { alert('Error: you must agree to our terms and conditions.'); return; } var entryCount = 0, emailHash = {}; for (var i = 0; i < numEntries; ++i) { var entry = entries[i], name = strip(entry.name.value); if (strip(entry.name.value) !== '') { var age = strip(entry.age.value), email = strip(entry.email.value); if (age === '' || email === '') { alert('Error: you must enter the age and email address of ' + name + '.'); return; } if (emailHash[email] !== undefined) { alert('Error: ' + name + ' has the same email address as ' + emailHash[email] + '. Addresses must be unique.'); return; } emailHash[email] = name; ++entryCount; } } if (entryCount == 0) { alert('Error: you must enter at least one name.'); return; } alert('Success! The form has been validated.'); }; }; 
 .agreement { font-family: sans-serif; font-size: 12px; } 
 

Agree to our terms and conditions