У меня есть страница формы регистрации, созданная на asp.net.
Когда пользователь нажимает кнопку Отправить , я хочу, чтобы в течение 5 секунд в верхней части страницы отображалось предупреждающее сообщение Bootstrap.с надписью "Зарегистрировано успешно" ".
Если пользователь нажимает Отправить и пользователь не заполнил обязательные поля, он не должен показывать сообщение с предупреждением, пока он не заполнитвсе поля и отправьте.
Я пробовал следующий код, но после заполнения всех полей и отправки ничего не происходит.
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<link href="Styles/styles.css" rel="stylesheet" type="text/css" />
<link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="messages" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="messages_content"></div>
</div>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div class="form">
<label for="FN">
<br />
<br />
First Name:</label>
<input type="text" id="txtFirstname" runat="server" />
<br />
<br />
<label for="LN">Last Name:</label>
<input type="text" id="txtLastname" runat="server" />
<br />
<br />
Password<span style="color: red">*</span>:
<asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox>
<label for="BT">
<asp:RequiredFieldValidator ID="Pw" runat="server" ControlToValidate="txtPassword" ErrorMessage="Please Provide a password !">Required</asp:RequiredFieldValidator>
</label>
<br />
<br />
E-mail<span style="color: red">*</span>:
<asp:TextBox ID="txtEmail" TextMode="Email" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="EM" runat="server" ControlToValidate="txtEmail" ErrorMessage="Please Provide an Email">Required</asp:RequiredFieldValidator>
<br />
<br />
<asp:Literal ID="ltrTable" runat="server"></asp:Literal>
<label for="BT">Blood Type:</label>
<telerik:RadComboBox runat="server" Skin="Telerik">
<Items>
<telerik:RadComboBoxItem Value="1" Text="A+" />
<telerik:RadComboBoxItem Value="2" Text="A-" />
<telerik:RadComboBoxItem Value="3" Text="B+" />
<telerik:RadComboBoxItem Value="4" Text="O" />
<telerik:RadComboBoxItem Value="5" Text="O+" />
</Items>
</telerik:RadComboBox>
<button class="btn btn-default" id="btnSubmit" onclick="insertData()">Submit</button>
<asp:Button ID="btnCancel" runat="server" CausesValidation="False" OnClick="Button1_Click" Text="Cancel" />
</form>
</div>
<script type="text/javascript">
$('#form').submit(function(e) {
$('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
$('#messages_content').html('<h4>registration successful message </h4>');
$('#modal').modal('show');
e.preventDefault();
});
</script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
//insertData();
fill_table();
})
function insertData() {
var firstname = document.getElementById("txtFirstname").value;
var lastname = document.getElementById("txtLastname").value;
var password = document.getElementById("txtPassword").value;
var email = document.getElementById("txtEmail").value;
if (firstname == "") {
alert("fails");
} else {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "Home.aspx/test",
data: "{firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'}",
dataType: "json",
async: false,
success: function (resdata) {
}
});
}
}
</script>
Что я делаю не так?
Спасибо!