Validation Form in asp.net with Javascript

Question

I just made my first form in asp.net with MVC | Using Jquery Ajax
Also i have successful and not successful message when the client fill the fields

The form code:

<div class="modal fade" id="ShowModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" class="close" data-dismiss="modal">&times;</a> <h4>Registration form</h4> <div id="message1"> <div class="alert alert-success"> <span class="glyphicon glyphicon-ok"></span><strong>Success Message! Your Registration Is Complete</strong> </div> </div> <div id="message2"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span><strong>Error Message! Your Registration Is Not Complete</strong> </div> </div> <div class="modal-body"> <form id="Registration"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input class="form-control" type="text" name="Username" id="user" placeholder="User" /> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input class="form-control" type="email" name="Email" id="Email" placeholder="Email" /> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input class="form-control" type="password" name="Password" id="Password" placeholder="Password" /> </div> </div> </form> <div class="form-group"> <button class="btn btn-info form-control" type="submit" onclick="SaveForm()"><i class="glyphicon glyphicon-registration-mark"> </i>Submit</button> </div> </div> </div> </div> </div> 

Javascript code for the messages

 <script> <script> function SignUp() { $("#ShowModal").modal(); $("#message1").hide(); $("#message2").hide(); } function SaveForm() { var name = $("#user").val(); var pwd = $("#Password").val(); var email = $("#Email").val(); if (name == "" || pwd == "" || email == "") { $("#message1").hide(); $("#message2").show(); return false; } var data = $("#Registration").serialize(); $.ajax({ type: "post", data: data, url: "/Register/saveData", success: function (result) { $("#message1").show(); $("#message2").hide(); $("#Registration")[0].reset(); } }); } </script> 

There is an easy way to make validation for email and password? for email need the be @ and passwords need to be 6-12 character. If it's possible i can edit my error message >> id="message2 in my code.

Thanks :)

Answer 1

For a simple validation, you can use plain JavaScript method includes:

// email simple validation if ( email.includes('@') && email.includes('.') ) { // email is valid } else { // error message } // password validation if ( password.length >= 6 && password.length <= 12 ) { // password have the desired length } else { // error }