Следует отметить, что, возможно, любая проверка на стороне клиента действительно должна быть подкреплена проверкой server side, поскольку обходить многое из того, что вы надеетесь выполнить sh с помощью Javascript, довольно тривиально. Кроме того, если кто-то нацелится на форму, используя, например, PHP & cURL none из подпрограмм проверки Javascript, то здесь будет использоваться вообще. По сути, не полагайтесь на проверку на стороне клиента.
С учетом сказанного в HTML5 существует ряд атрибутов и элементов, которые помогают вам в выполнении проверки на стороне клиента. Элемент формы может иметь установленный атрибут required - форма не будет отправлена, пока это поле не будет иметь значения. Если формат этого поля должен быть в определенной форме, вы можете назначить атрибут pattern (в основном шаблон стиля RegExp) и снова, если значение поля не соответствует этому шаблону, форма не будет отправлена.
Функция validation действительно брала только составляющие элементы date of birth пользователя для проверки и игнорирования других полей. Имея единственную функцию для проверки, вы можете убедиться, что все элементы формы используются в задачах проверки.
Надеюсь, что следующее может немного помочь - это было то, что я придумал, и оно далеко от совершенства, но может быть полезным.
document.addEventListener('DOMContentLoaded',function(){
var today = new Date();
var nl=String.fromCharCode( 10 );// New Line character
var oForm = document.querySelector('form');
var oBttn = document.querySelector('input[type="button"][name="bd"]');
oBttn.addEventListener('click',function(e){
oForm.day.value=today.getDate();
oForm.month.value=today.getMonth()+1;
oForm.year.value=today.getYear()+1900;
});
oForm.addEventListener('submit',function(e){
try{
e.preventDefault();
Array.from( this.elements ).forEach( el=>{
if( el.type.toLowerCase()!='submit' ){
if( !el.value || el.value=='' || ( el.type.toLowerCase()=='select-one' && el.value=='false' ) ){
var error=[ '"'+el.name + '" cannot be empty' ];
if( el.hasAttribute( 'pattern' ) ) error.push( 'The field "'+ el.name + '" has a required pattern of '+el.getAttribute('pattern') )
if( el.hasAttribute('data-rule') )error.push( el.dataset.rule );
throw new Error( error.join( nl ) );
}
}
});
return this.submit();
}catch( err ){
alert( err );
return false;
}
});
});
body,body *{
box-sizing:border-box; font-family:monospace;
}
form{
width:50%;
padding:1rem;
border:1px dotted gray;
float:none;
margin:auto;
}
label{
margin:0.25rem auto;
display:block;
width:80%;
float:left;
clear:both;
text-indent:1rem;
}
label input,
label select{
float:right; width:40%;
}
p{
clear:both;
}
.bold{
font-weight:bolder; text-decoration:underline;
}
<form method='POST' action='http://www.it.murdoch.edu.au/cgi-bin/reply1.pl'>
<p class='bold'> Welcome! Please enter the following details:</p>
<label for='name'>Name:
<input type='text' name='name' size='10' pattern='[a-zA-z\s]+' data-rule='An entry for this field is required.' required />
</label>
<br />
<label for='number'>Number:
<input type='text' name='number' pattern='[0-9\+ ]+' data-rule='Only numbers and area codes are allowed in this field.' required />
</label>
<br />
<p class='bold'>Enter your birthday here: <p>
<label for='day'>Day: <input type='number' name='day' size='2' min=1 max=31 step=1 value='1' required /></label>
<label for='month'>Month: <input type='number' name='month' size='2' min=1 max=12 step=1 value='1' required /></label>
<label for='year'>Year: <input type='number' name='year' size='4' min=1900 max=2020 step=1 value='2000' required /></label>
<br />
<label for='pastime'> Favourite pastime:
<select name='pastime' required data-rule='Please select a pastime.'>
<option value=false selected hidden disabled>---Please choose an option---
<option value='surfingtheweb'>Surfing the Web
<option value='playingsport'>Playing Sport
<option value='listeningtomusic'>Listening to Music
<option value='watchingtv'>Watching TV
<option value='playinggames'>Playing Games
<option value='communityservice'>Community Service
<option value='daydreaming'>Daydreaming
<option value='reading'>Reading
<option value='meditation'>Meditation
</select>
</label>
<p>
<input type='submit' name='sub' />
<input type='button' name='bd' value='birthday' />
</p>
</form>