如何将表单验证错误放入警报框中

Question

<?php
echo '<p>Username</p>';
echo form_input('username', set_value('username', ''));
echo '<p>Password</p>';
echo form_input('password', set_value('password', ''));
echo '<p>Confirm Password</p>';
echo form_input('password2', ' ');
echo form_submit('submit', 'Create Account');
?>
<?php echo validation_errors('<div class="error"></div>'); ?>

这是我的代码，它运行良好，但错误显示在表单下面。我希望错误显示在弹出的警告框中。

Answer 1

试试这个

<?php
echo '<p>Username</p>';
echo form_input('username', set_value('username', ''));
echo form_error('username','<div class="alert alert-danger">','</div>');
echo '<p>Password</p>';
echo form_input('password', set_value('password', ''));
echo form_error('password','<div class="alert alert-danger">','</div>');
echo '<p>Confirm Password</p>';
echo form_input('password2', ' ');
echo form_error('password2','<div class="alert alert-danger">','</div>');
echo form_submit('submit', 'Create Account');
?>

并删除

<?php echo validation_errors('<div class="error"></div>'); ?>

如果你想在某种甜蜜的提醒或任何事情中出错只需尝试脚本并根据需要进行编辑，使用相同的代码直到form_submit方法并删除validation_errors方法

<script type="text/javascript">
<?php if(form_error('username')){ ?>
alert('<?php echo form_error('password'); ?>');
<?php } ?>  
<?php if(form_error('password')){ ?>
alert('<?php echo form_error('password'); ?>');
<?php } ?>  
<?php if(form_error('password2')){ ?>
alert('<?php echo form_error('password'); ?>');
<?php } ?>  
</script>

Answer 2

$('#submit').click(function (e) {
var username = $("input#username").val();
var password = $("input#password").val();
var confirmPassword = $("input#password2").val();
if(username==""){
alert('Username cannot be empty');
return false;
}
if(password==""){
alert('password cannot be empty');
return false;
}
if(confirmPassword==""){
alert('Confirm password cannot be empty');
return false;
}
if(password != confirmPassword){
alert("Confrim password doesn't match password");
return false;
}
return true
}       

Answer 3

假设您使用AJAX提交表单，一旦验证失败，您可以提醒消息，而不是将其附加到'<div class="error"></div>'中。js脚本中的代码可能如下所示：

//Assuming your button ID is submit
$('#submit').click(function (e) {       
var username = $("input#username").val();
var password = $("input#password").val();
if (username == None):
alert("User name cant be none");
else if (password == None):
alert("Password cant be none");
else:
//Submit a form after validation is satisfied.
$.ajax({.......});
});

还有一些JS表单验证库可用，您可以使用它们。这是适合您要求的参考资料。https://www.tutorialspoint.com/javascript/javascript_form_validations.htm