Estou usando o toastr.js para mostrar mensagens de validação de formulário, mas ao usar este plugin ele inutilizou todos os meus inputs que tinham a propriedade required
.
Meu código:
<!DOCTYPE html>
<html>
<head>
<title>TOASTR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
</head>
<body>
<form>
<p>First Name: <input type="text" name="firstname" required></p>
<p>Last Name: <input type="text" name="lastname" required></p>
<p><button class="btnsubmit" type="submit" value="submit" data-toastr="success" data-message="Thanks for your donate.">Submit</button></p>
</form>
<script>
toastr.options.closeButton = true;
$('[data-toastr="success"]').on('click', function (event) {
event.preventDefault();
toastr.success($(this).data('message'));
});
</script>
</body>
</html>
Alguém sabe o porquê disso?