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.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validation With AngularJs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div class="container-fluid" data-ng-app="rouUtility" data-ng-controller="MainCtrl">
<br />
<h5 class="text-center">Validation with angularjs</h5>
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<ng-form id="frmLanguage" name="frmLanguage">
<hr />
<div class="form-row">
<div class="form-group col-md-6">
<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>
<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 />
<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>
</div>
<div class="form-group col-md-6">
<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>
<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 />
<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>
</div>
</div>
<div class="form-group">
<label for="txtLanguageRemarks">Remarks</label>
<textarea class="form-control" id="txtLanguageRemarks" name="LanguageRemarks" rows="2" placeholder="About language" style="resize: vertical"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-4 offset-2">
<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>
</div>
<div class="form-group col-md-4">
<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>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script type="text/javascript">
var app = angular.module('rouUtility', []);
app.controller('MainCtrl', function ($scope) {
// $scope.LanguageFont = "Arial Unicode MS";
});
</script>
</body>
</html>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Test
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnCreate_Click(object sender, EventArgs e)
{
string LanguageName = Request.Form["LanguageName"];
string LanguageFont = Request.Form["LanguageFont"];
string txtLanguageRemarks = Request.Form["LanguageRemarks"];
}
}
}

please someone help me out ....

Answers (1)

how to add popup on gridview when clicked

Iterating through a viewbag of selectlist items