Post
Ask Question
Anilananda Chakrabortty

Anilananda Chakrabortty

  • NA
  • 425
  • 78k

Asp.net form validation with angularjs

Jan 24 2019 5:51 AM
Hi,
 
here i face some issue in my application.
 
I have taken 3 textbox and two button all are normal HTML control.
 
Among 3 textbox one textbox will be filled by default and another two textbox are empty.
The submit button will be disabled until required textbox are not filled.
 
This is the validation i have done with angularjs.
 
It is a normal ASP.net project.
 
Once all the validation done the button will be enabled and can save.
 
I used Update Panel to avoid page load.
 
Till here it is ok their is no issue .. but it happens only first time only.
 
Once i press submit button(btnCreate) all the validation removed in fact angularjs not working.
 
I think maybe somehow angularjs file not loading when i press submit button.
 
My requirement :
 
It should continue the validation after button click(thats all).
 
Note: i do not want page refresh so i used update panel.
 
If i remove update panel then there is no issue everything is fine.
 
but without page refresh i want.
 
Suggestion :
 
Plz create a simple single page application and copy paste the code you will get what problem i faced.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title>Validation With AngularJs</title>  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />  
  7. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />  
  8. </head>  
  9. <body>  
  10. <form id="form1" runat="server">  
  11. <asp:ScriptManager runat="server"></asp:ScriptManager>  
  12. <div class="container-fluid" data-ng-app="rouUtility" data-ng-controller="MainCtrl">  
  13. <br />  
  14. <h5 class="text-center">Validation with angularjs</h5>  
  15. <asp:UpdatePanel runat="server" ID="up1">  
  16. <ContentTemplate>  
  17. <ng-form id="frmLanguage" name="frmLanguage">  
  18. <hr />  
  19. <div class="form-row">  
  20. <div class="form-group col-md-6">  
  21. <label for="txtLanguage" data-ng-class="{ 'text-danger' : frmLanguage.LanguageName.$invalid && !frmLanguage.LanguageName.$pristine || frmLanguage.LanguageName.$error.minlength,'text-success':!frmLanguage.LanguageName.$pristine}">Language name</label>  
  22. <input type="text" class="form-control" id="txtLanguage" name="LanguageName" data-ng-class="{ 'is-invalid' : frmLanguage.LanguageName.$invalid && !frmLanguage.LanguageName.$pristine,'is-valid' : !frmLanguage.LanguageName.$pristine }" data-ng-model="LanguageName" placeholder="Language" required />  
  23. <p data-ng-show="frmLanguage.LanguageName.$invalid && !frmLanguage.LanguageName.$pristine && !frmLanguage.LanguageName.$error.minlength" class="invalid-feedback"><i class="fa fa-meh-o" aria-hidden="true"></i>Language is required!</p>  
  24. </div>  
  25. <div class="form-group col-md-6">  
  26. <label for="txtLanguageFont" data-ng-class="{ 'text-danger' : frmLanguage.LanguageFont.$invalid && !frmLanguage.LanguageFont.$pristine || frmLanguage.LanguageFont.$error.minlength,'text-success':!frmLanguage.LanguageFont.$pristine || frmLanguage.LanguageFont.$valid}">Language font</label>  
  27. <input type="text" class="form-control" id="txtLanguageFont" name="LanguageFont" data-ng-class="{ 'is-invalid' : frmLanguage.LanguageFont.$invalid && !frmLanguage.LanguageFont.$pristine,'is-valid' : !frmLanguage.LanguageFont.$pristine || frmLanguage.LanguageFont.$valid}" value="Arial Unicode MS" placeholder="Language font" required />  
  28. <p data-ng-show="frmLanguage.LanguageFont.$invalid && !frmLanguage.LanguageFont.$pristine && !frmLanguage.LanguageFont.$error.minlength" class="invalid-feedback"><i class="fa fa-meh-o" aria-hidden="true"></i>Language font is required!</p>  
  29. </div>  
  30. </div>  
  31. <div class="form-group">  
  32. <label for="txtLanguageRemarks">Remarks</label>  
  33. <textarea class="form-control" id="txtLanguageRemarks" name="LanguageRemarks" rows="2" placeholder="About language" style="resize: vertical"></textarea>  
  34. </div>  
  35. <div class="form-row">  
  36. <div class="form-group col-md-4 offset-2">  
  37. <button id="btnCreate" runat="server" class="btn btn-outline-primary btn-block secon-sh-btn-primary" data-ng-disabled="frmLanguage.$invalid" onserverclick="btnCreate_Click" ng-click="go();" value="Create"><i class="fa fa-check-square-o"></i> Create</button>  
  38. </div>  
  39. <div class="form-group col-md-4">  
  40. <button type="button" id="btnCancel" class="btn btn-outline-danger btn-block secon-sh-btn-danger"><i class="fa fa-times-circle-o"></i> Cancel</button>  
  41. </div>  
  42. </div>  
  43. </ContentTemplate>  
  44. </asp:UpdatePanel>  
  45. </div>  
  46. </form>  
  47. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  48. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  
  49. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  50. <script src="https://code.angularjs.org/1.2.21/angular.js"></script>  
  51. <script type="text/javascript">  
  52. var app = angular.module('rouUtility', []);  
  53. app.controller('MainCtrl', function ($scope) {  
  54. // $scope.LanguageFont = "Arial Unicode MS";  
  55. });  
  56. </script>  
  57. </body>  
  58. </html>  
Code Behind
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. namespace Test  
  8. {  
  9. public partial class WebForm1 : System.Web.UI.Page  
  10. {  
  11. protected void Page_Load(object sender, EventArgs e)  
  12. {  
  13. }  
  14. protected void btnCreate_Click(object sender, EventArgs e)  
  15. {  
  16. string LanguageName = Request.Form["LanguageName"];  
  17. string LanguageFont = Request.Form["LanguageFont"];  
  18. string txtLanguageRemarks = Request.Form["LanguageRemarks"];  
  19. }  
  20. }  
  21. }  
please someone help me out ....

Answers (1)