0

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 :)

1
  • whats your question ? Commented Jun 18, 2020 at 14:09

1 Answer 1

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

}
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.