下午,我正在使用 PHP、HTML5 和 Bootstrap。我已经建立了一个表格,它被分隔在 5 个选项卡中,并且在这个表格中有几个必填字段。所有必需的输入字段都是“文本”,并且还标有 required="required" aria-required="true"。
提交时,如果在当前选项卡上,html5 验证会捕获错误,但是我想使用一些 jquery 来重新关注正确的选项卡和尚未填写的输入字段并显示警告框。我不确定这是否可能..
要么,如果更容易检查选项卡更改时选项卡所需的字段..
页面上只有 1 个表格。
非常感谢
** 编辑 ** 我在修补后为必填字段创建了一个警报功能,但它仍然不会更改选项卡以专注于必填字段。'productbutton' 是整个表单的提交按钮的 ID。'product_form' 是我的表单的 ID。
$('#productbutton').click(function(){
var error = 0;
var msg = 'An Error Has Occured.\n\nRequired Fields missed are :\n';
$(':input[required]', '#product_form').each(function(){
$(this).css('border','2px solid green');
if($(this).val() == ''){
msg += '\n' + $(this).attr('id') + ' Is A Required Field..';
$(this).css('border','2px solid red');
if(error == 0){ $(this).focus(); }
error = 1;
}
});
if(error == 1) {
alert(msg);
return false;
} else {
return true;
}
});
基本上,如果error = 1,它将弹出一个错误消息,其中包含已丢失的输入ID。然后它无法提交返回 false 的表单。它确实专注于错过的字段,并在字段周围放置了一个红色边框。但它不关注选项卡。否则它将提交表单。