エラーメッセージと成功したメッセージを登録フォームに設定する方法

私のAPIでユーザーデータを送信しようとしていますが、このフォームではエラーメッセージと正常なmessage.soを印刷しようとしていますが、フォーム提出後のメッセージ。エラーメッセージと成功したメッセージを登録フォームに設定する方法

<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="^\[email protected]\S+\.\S+$" title="[email protected]"> 
          </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>

- これを設定します。

出典

2016-08-10 Sanjay Yadav

<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="^\[email protected]\S+\.\S+$" title="[email protected]"> 
         </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>

出典

2016-08-10 06:07:20

balu、@@あなたが後にボタン –

を提出し、アラートを作成する方法を教えてくださいすることができますhttps://scotch.io/tutorials/submitting-ajax-forms-with-jquery –

エラーメッセージと成功したメッセージを登録フォームに設定する方法

答えて

関連する問題