ソースコード
<form id="form1" action="">
<div>
動物名
<input type="text" name="animal_name" required title="動物名を入力してください。"/>
</div>
<div>
動物コード
<input type="text" name="animal_age" pattern="^[0-9A-Za-z]+$" title="動物コードを半角英数字で入力してください。" value="abc123XYZ">
</div>
<div>
動物日付
<input type="text" name="animal_date" pattern="[0-9]{4}(-|/)[0-9]{1,2}(-|/)[0-9]{1,2}" title="日付(Y-m-d)を入力してください。(例 2012-12-12)" value="2016-10-17">
</div>
<div id="err_msg" class="text-danger"></div>
<input type="submit" onclick="return onSubmit1()" />
</form>
function onSubmit1(){
let err_msg = onsubmitValidation('form1');
if(err_msg){
$('#err_msg').html(err_msg);
return false;
}
return true;
}
/**
* onsubmitイベントのバリデーション
* @param string form_xid フォームID
* @return string エラーメッセージ
*/
function onsubmitValidation(form_xid){
let inputs = $('#' + form_xid + ' input');
let err_msg = '';
inputs.each((i,elm) => {
let valid_res = elm.checkValidity();
if(valid_res == false){
let title = $(elm).attr('title');
err_msg += `<div>${title}</div>`;
}
});
if(err_msg != '') return err_msg;
return false;
}