{"id":65,"date":"2024-12-06T07:16:32","date_gmt":"2024-12-06T07:16:32","guid":{"rendered":"https:\/\/alpeshconnect.in\/blog\/?p=65"},"modified":"2024-12-06T07:16:32","modified_gmt":"2024-12-06T07:16:32","slug":"form-validation-using-angular-js","status":"publish","type":"post","link":"https:\/\/alpeshconnect.in\/blog\/2024\/12\/06\/form-validation-using-angular-js\/","title":{"rendered":"Form Validation using Angular JS"},"content":{"rendered":"\n

Angular JS which accepts and validate student Name , Email and Mobile from the user<\/p>\n\n\n\n

\"Form<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\" ng-app=\"studentApp\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Student Form<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\">\n<\/head>\n<body ng-controller=\"StudentController\">\n\n<div class=\"container\">\n    <h2>Student Form<\/h2>\n    <form name=\"studentForm\" ng-submit=\"submitForm(studentForm.$valid)\" novalidate>\n\n        <!-- Name -->\n        <div class=\"form-group\" ng-class=\"{'has-error': studentForm.name.$touched && studentForm.name.$invalid}\">\n            <label for=\"name\">Name:<\/label>\n            <input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\" ng-model=\"student.name\" required>\n            <span class=\"help-block\" ng-show=\"studentForm.name.$touched && studentForm.name.$error.required\">Name is required.<\/span>\n        <\/div>\n\n        <!-- Email -->\n        <div class=\"form-group\" ng-class=\"{'has-error': studentForm.email.$touched && studentForm.email.$invalid}\">\n            <label for=\"email\">Email:<\/label>\n            <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" ng-model=\"student.email\" required>\n            <span class=\"help-block\" ng-show=\"studentForm.email.$touched && studentForm.email.$error.required\">Email is required.<\/span>\n            <span class=\"help-block\" ng-show=\"studentForm.email.$touched && studentForm.email.$error.email\">Invalid email address.<\/span>\n        <\/div>\n\n        <!-- Mobile Number -->\n        <div class=\"form-group\" ng-class=\"{'has-error': studentForm.mobile.$touched && studentForm.mobile.$invalid}\">\n            <label for=\"mobile\">Mobile No:<\/label>\n            <input type=\"text\" class=\"form-control\" id=\"mobile\" name=\"mobile\" ng-model=\"student.mobile\" ng-pattern=\"\/^\\d{10}$\/\" required>\n            <span class=\"help-block\" ng-show=\"studentForm.mobile.$touched && studentForm.mobile.$error.required\">Mobile number is required.<\/span>\n            <span class=\"help-block\" ng-show=\"studentForm.mobile.$touched && studentForm.mobile.$error.pattern\">Mobile number must be 10 digits.<\/span>\n        <\/div>\n\n        <!-- Submit Button -->\n        <button type=\"submit\" class=\"btn btn-primary\" ng-disabled=\"studentForm.$invalid\">Submit<\/button>\n\n    <\/form>\n<\/div>\n\n<!-- Include AngularJS -->\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js\"><\/script>\n<script>\n    var app = angular.module('studentApp', []);\n\n    app.controller('StudentController', function($scope) {\n        $scope.student = {};\n\n        $scope.submitForm = function(isValid) {\n            if (isValid) {\n                alert('Form Submitted Successfully!');\n                console.log($scope.student);\n            } else {\n                alert('Please fill out the form correctly.');\n            }\n        };\n    });\n<\/script>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Angular JS which accepts and validate student Name , Email and Mobile from the user<\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,3],"tags":[8,9],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-web-designing","category-bca","tag-advanced-web-designing","tag-angular-js"],"_links":{"self":[{"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":2,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions\/68"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alpeshconnect.in\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}