Validation multiple forms with single javascript function

Updated : Nov 21, 2019 in Articles

Validation multiple forms with single javascript function

In this article, we will learn how to Validation multiple HTML forms with single javascript function instead of writing multiple functionalities for each HTML form for client-side validations we will use JSON object 

Introduction:

In your project you have multiple forms, the problem with the multiple forms is client validation individually.

each and every HTML form separately you will implement client-side validations that will take lots of time 

In SQL server it will run specific table information_schema like ColumnName, DataType, Required, Max_Lenght…..

We will return this information schema as a json format  See the given below json format

{
    "name": "CustomerId",
    "Required": false,
    "Max_Lenght": 4,
    "Datatype": [ { "Name": "int" } ]
  },

By using The above JSON format we will validate the HTML  forms simply and if you want to create a  Dynamic table, UI from JSON schema also possible we will see this concept in the next article in the detail

Implementing client side Validations for multiple forms with single javascript function

Step 1: Create a stored procedure for retrieving the json schema see the given below sql Query

GOCREATE procedure [dbo].[jsonData](@tablename varchar(100))
as
begin
declare @validtionfile nvarchar(MAX),@tablfields nvarchar(MAX);
set @validtionfile=( SELECT  c.name,        
       c.is_nullable as Required,
       datatype.name as Name,
	   c.max_length as Max_Lenght
  FROM sys.columns c
  JOIN sys.types  as Datatype
  ON c.user_type_id = datatype.user_type_id 
  WHERE c.object_id = Object_id(@tablename) FOR JSON AUTO);

select @validtionfile

end


Execute the stored procedure (pass your table as a parameter )

exec [dbo].[jsonData]
@tablename='customer'

The procedure will return json format see the given below  some example format

[{"name":"Id","Required":false,"Max_Lenght":4,"Datatype":[{"Name":"int"}]},{"name":"FirstName","Required":false,"Max_Lenght":80,"Datatype":[{"Name":"nvarchar"}]},{"name":"LastName","Required":false,"Max_Lenght":80,"Datatype":[{"Name":"nvarchar"}]},{"name":"City","Required":true,"Max_Lenght":80,"Datatype":[{"Name":"nvarchar"}]},{"name":"Country","Required":true,"Max_Lenght":80,"Datatype":[{"Name":"nvarchar"}]},{"name":"Phone","Required":true,"Max_Lenght":40,"Datatype":[{"Name":"nvarchar"}]},{"name":"Message","Required":true,"Max_Lenght":400,"Datatype":[{"Name":"nvarchar"}]}]

Step 2: Implementing controller(if you are using Asp.net MVC) or pass formatted JSON schema URL and your form name(ex: submit_bookmark) to given below Javascript function

public static string CombineJson(dynamic object1)
  {
      var jsonObject = "";
      JArray jsonArray = null;
      foreach (var innerData in object1)
       {
           jsonArray = JArray.Parse(innerData);
           jsonObject = JsonConvert.SerializeObject(jsonArray);
       }
           return jsonObject;
  }

public ActionResult ValidateJsondata()
  {
       var courses = context.jsonData("dbo.Customer");
       var daata = CombineJson(courses);
       return Json(daata, JsonRequestBehavior.AllowGet);
  }

Javascript function:

function validateAddCategory() {
    var isValid = true;
    $.ajax({
        url: "/Home/ValidateJsondata", //pass your formatted json url 
        data: {
            format: 'json'
        },
        error: function () {
            $('#info').html('<p>An error has occurred</p>');
        },
        dataType: 'json',
        success: function (data) {
            var jsonobject = data;
            var arr = [];
            var oForm = document.forms["submit_bookmark"];
            var arlene1 = [];
            var totalDivCountThroughFind = $('form').find('input').length;
            for (var i = 0; i < totalDivCountThroughFind; i++) {
                var f = oForm[i].id;
                if (oForm[i].id != "") {
                    arlene1[i] = oForm[i].id;
                }
            }
            var hash = "#";
            for (var i = 0; i < jsonobject.length; i++) {
                var cal = jsonobject[i].name;
                var type = jsonobject[i].Required;
                arr[i] = cal;
                var fullconcatstring = hash.concat(cal);
                var val = $(fullconcatstring).val();
                if (type) {
                    $(fullconcatstring).css('border-color', '1px solid lightgrey');
                }
                else {
                    $(fullconcatstring).css('border-bottom', '1px solid red');
                    isValid = false;
                }
            }
            return isValid;
        }
    });
}

Summary:

the above article we will learn Validation multiple forms by using with single javascript function next article we will see how to create a dynamically HTML form based on JSON schema with validations

Ok thanks see the given below related articles also

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x