<div id="UserTable">
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
<tr>
<td>Jack Wilshere</td>
<td>Jack@gmail.com</td>
<td>Wlshere</td>
</tr>
</table>
<input type="button" id="createUser" value="Create User" />
</div>
<div id="dialogForm" title="Create User">
<span id="warningSpan"></span><br /><br />
<form>
<label for="name">Name</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email</label><br />
<input type="text" name="email" id="email" /><br />
<label for="password">Password</label><br />
<input type="text" name="password" id="password" /><br />
</form>
</div>
$(function () {
$("#dialogForm").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Create User": function () {
createNewUser();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#createUser")
.button()
.click(function () {
$("#dialogForm").dialog("open");
});
});
function createNewUser() {
var nameValue = $("#name").val();
var emailValue = $("#email").val();
var passwordValue = $("#password").val();
$("#warningSpan").text('');
var isValid = validateForm(nameValue, emailValue, passwordValue);
debugger;
if (isValid) {
$("#UserTable tbody").append("<tr>" +
"<td>" + nameValue + "</td>" +
"<td>" + emailValue + "</td>" +
"<td>" + passwordValue + "</td>" +
"</tr>");
$("#dialogForm").dialog("close");
$("#name").val("");
$("#email").val("");
$("#password").val("");
}
}
function validateForm(name, email, password) {
var isValidName = true;
var isValidEmail = true;
var isValidPassword = true;
if (name == '') {
$("#warningSpan").text("name is mandatory!");
isValidName = false;
}
if (email == '') {
var warningSpan = $("#warningSpan").text();
if (warningSpan != null) {
$("#warningSpan").append("<br /> email is mandatory!");
}
else {
$("#warningSpan").text("email is mandatory!");
}
isValidEmail = false;
}
else {
var regex = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (regex.test(email)) {
isValidEmail = true;
}
else {
isValidEmail = false;
var warningSpan = $("#warningSpan").text();
if (warningSpan != null) {
$("#warningSpan").append("<br /> email is not in correct format!");
}
else {
$("#warningSpan").text("email is not in correct format!");
}
}
}
if (password == '') {
var warningSpan = $("#warningSpan").text();
if (warningSpan != null) {
$("#warningSpan").append("<br/> password is mandatory!");
}
else {
$("#warningSpan").text("password is mandatory!");
}
isValidPassword = false;
}
if (isValidName && isValidEmail && isValidPassword) {
return true;
}
else {
return false;
}
}
table td,th
{
border:1px solid black;
width:400px;
}
table
{
border:1px solid black;
border-collapse:collapse;
}