Sanjay Yadav Sanjay Yadav - 4 months ago 13
Ajax Question

how to set error message and successful message in register form

I am working to send user data to in my api, and in this form i am trying to print error message and successful message.so right now unable to print error or success message on after form submission;

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Save").click(function () {

// var person = new Object();
// person.Title = $('#Title').val();
// person.FirstName = $('#FirstName').val();
// person.LastName = $('#LastName').val();
// person.CompnayName = $('#CompnayName').val();
// person.Address = $('#Address').val();
// person.Email= $('#Email').val();
// person.Phone = $('#Phone').val();
// person.Mobile = $('#Mobile').val();
debugger;
var person=$('#form1').serialize();

$.ajax({
url: 'http://192.168.1.102:1512/qlikapi/RegisterUser',
type: 'Post',
data:person,
success: function (data, textStatus, xhr) {
console.log(data.ErrorMessage);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});


});
});
</script>
<style>

textarea:focus, input:focus{
outline: 0;
}

input:focus:invalid,
textarea:focus:invalid{
border:1px solid #F5192F;
box-shadow:0 0 4px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
border: 1px solid #64C364;
box-shadow: 0 0 4px #64C364;
}

</style>
</head>
<body>
<div class="container">
<div class="row">

<form id="form1" method="post">
<div class="form-title-row">
<h1>Register Here</h1>
</div>
<div class="col-md-6">
<div class="form-row">
<label>
<span> Title </span>
<input type="text" name="Title" id="title"required>
</label>
</div>
<div class="form-row">
<label>
<span> FirstName </span>
<input type="text" name="FirstName" id="lastname"required>
</label>
</div>
<div class="form-row">
<label>

<span> Address </span>
<input type="text" name="Address" id="address"required>
</label>
</div>
<div class="form-row">
<label>
<span> Phone</span>
<input type="text" name="Phone" id="phone"required>
</label>
</div>

</div><!--closed fo first form<!-->
<div class="col-md-6">
<div class="form-row">
<label>
<span> LastName </span>
<input type="text" name="LastName" id="lastname"required>
</label>
</div>

<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="Email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">
</label>
</div>

<div class="form-row">
<label>
<span> CompanyName </span>
<input type="text" name="CompanyName" id="compnayname"required>
</label>
</div>
<div class="form-row">
<label>
<span> Mobile </span>
<input type="text" name="Mobile" id="Mobile"required>
</label>
</div>

<div class="form-row">
<button type="submit" id="Save">Submit Form</button>
</div>

</div>
</form>
</div><!-- closed for row><!-->
</div><!--closed for container><!-->
</body>
</html>


--help me configure this !!

Answer
<style>
    @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
    .my-notify-info, .my-notify-success, .my-notify-warning, .my-notify-error {
        padding:10px;
        margin:10px 0;
    }
    .my-notify-info:before, .my-notify-success:before, .my-notify-warning:before, .my-notify-error:before {
        font-family:FontAwesome;
        font-style:normal;
        font-weight:400;
        speak:none;
        display:inline-block;
        text-decoration:inherit;
        width:1em;
        margin-right:.2em;
        text-align:center;
        font-variant:normal;
        text-transform:none;
        line-height:1em;
        margin-left:.2em;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale
    }
    .my-notify-info:before {
        content:"\f05a";
    }
    .my-notify-success:before {
        content:'\f00c';
    }
    .my-notify-warning:before {
        content:'\f071';
    }
    .my-notify-error:before {
        content:'\f057';
    }
    .my-notify-info {
        color: #00529B;
        background-color: #BDE5F8;
    }
    .my-notify-success {
        color: #4F8A10;
        background-color: #DFF2BF;
    }
    .my-notify-warning {
        color: #9F6000;
        background-color: #FEEFB3;
    }
    .my-notify-error {
        color: #D8000C;
        background-color: #FFBABA;
    }

    textarea:focus, input:focus{
        outline: 0;
    }

    input:focus:invalid,
    textarea:focus:invalid{
        border:1px solid #F5192F;
        box-shadow:0 0 4px #F5192F;
    }

    input:focus:valid,
    textarea:focus:valid{
        border: 1px solid #64C364;
        box-shadow: 0 0 4px #64C364;
    }

</style>
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <div class="container">
        <div class="row">

            <form id="form1" method="post">
                <div class="form-title-row">
                    <h1>Register Here</h1>
                </div>
                <div class="col-md-6">
                    <div class="form-row">
                        <label>
                            <span> Title </span>
                            <input type="text" name="Title"  id="title">
                        </label>
                    </div>
                    <div class="form-row">
                        <label>
                            <span> FirstName </span>
                            <input type="text" name="FirstName"  id="lastname">
                        </label>
                    </div>
                    <div class="form-row">
                        <label>

                            <span> Address </span>
                            <input type="text" name="Address"  id="address">
                        </label>
                    </div>
                    <div class="form-row">
                        <label>
                            <span> Phone</span>
                            <input type="text" name="Phone"  id="phone">
                        </label>
                    </div>

                </div><!--closed fo first form<!-->
                <div class="col-md-6">
                    <div class="form-row">
                        <label>
                            <span> LastName </span>
                            <input type="text" name="LastName"  id="lastname">
                        </label>
                    </div>

                    <div class="form-row">
                        <label>
                            <span>Email</span>
                            <input type="email" name="Email" pattern="^\S+@\S+\.\S+$" title="example@mail.com">
                        </label>
                    </div>

                    <div class="form-row">
                        <label>
                            <span> CompanyName </span>
                            <input type="text" name="CompanyName"  id="compnayname">
                        </label>
                    </div>
                    <div class="form-row">
                        <label>
                            <span> Mobile </span>
                            <input type="text" name="Mobile"  id="Mobile">
                        </label>
                    </div>
                    <div class="form-row">
                        <button id="Save">Submit Form</button>
                    </div>
                </div>
            </form>
        </div></div>
            <div class="my-notify-info" style="display:none;" >This is info text</div>
            <div class="my-notify-success" style="display:none;" >This is success text</div>
            <div class="my-notify-warning"  style="display:none;" >This is warning text</div>
            <div class="my-notify-error" style="display:none;" >This is error text</div>
<script type="text/javascript">   
    $(function () {
         $("#Save").button().click(function(event){
             var title = $('#title').val();         
             if (title == "") {
                 if (title == "") {
                    document.getElementById("title").style.borderColor = "red";
                }
                $('.my-notify-warning').show();
                $('.my-notify-warning').fadeIn();
                $(".my-notify-warning").text("Please fill the required fields");
                setTimeout(function () {
                    $('.my-notify-warning').fadeOut();
                }, 2000);
             }
             event.preventDefault();
        }); 
        $("#title").focus(function () {
            document.getElementById("title").style.borderColor = "";
        });
    });  
</script>