<div id="UserTable"> <table> <tr> <th>Name</th> <th>Email</th> <th>Password</th> </tr> <tr> <td>Jack Wilshere</td> <td>[email protected]</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; }