Tips for implementing dropdown control validation using AngularJS validators

Question

Tips for implementing dropdown control validation using AngularJS validators

I am currently facing an issue with angular js dropdown validation. I have been trying to implement dropdown validation using the code from this website: https://github.com/turinggroup/angular-validator

However, upon checking the demo provided in this link: Demo, it seems that there is no specific information regarding how to validate a Dropdown control. If anyone has successfully implemented dropdown validation using the same code, I would greatly appreciate some guidance.

I have created a Plunker demonstrating my dropdown control:

MyDropdownControlFullDemo

Below is the code for my dropdown:

<select class="form-control m-b-sm" required ng-model="form.Obj" ng-options="c.Name for c in Obj track by c.Id">
</select>

$scope.Obj = [
{Id : '0', Name : 'Select' }, 
{Id : '1', Name : 'USA' },       
{Id : '2', Name : 'Canada' },
{Id : '3', Name : 'Russia' } ];

}

$scope.Obj = { Id: '0', name: 'Select' };

I am looking to display validation if the user does not select any option from the dropdown, similar to how validation appears for a textbox control. Your assistance on this matter would be highly appreciated.

javascript angularjs validation angularjs-validation angularjs-forms

Answer 1

Answer №1

To update your code, make the following changes:

In HTML for the select list-

    <select class="form-control m-b-sm" name="selectbox" required-message="'Yo! This field is required..'"
                            required ng-model="form.Obj" ng-options="c.Name for c in Objlist track by c.Id">
        <option value="">Select</option>
</select>

The controller will appear as follows-

 angular.module('angular-validator-demo').controller('DemoCtrl', function($scope){

 $scope.Objlist = [
    {Id: '0', Name: 'Select'},
    {Id: '1', Name: 'USA'},       
    {Id: '2', Name: 'Canada'},
    {Id: '3', Name: 'Russia'}
];

  $scope.Obj = { Id: '0', name: 'Select' };

    $scope.submitMyForm = function(){
        alert("Form submitted");
    };

    $scope.myCustomValidator = function(text){      
        return true;
    };


    $scope.anotherCustomValidator = function(text){
        if(text === "rainbow"){
            return true;
        }
        else return "type in 'rainbow'";
    };

    $scope.passwordValidator = function(password) {

        if(!password){return;}

        if (password.length < 6) {
            return "Password must be at least 6 characters long";
        }

        if (!password.match(/[A-Z]/)) {
             return "Password must have at least one capital letter";
        }

        if (!password.match(/[0-9]/)) {
             return "Password must have at least one number";
        }

        return true;
    };
});

Answer 2

To update your code, make the following changes:

In HTML for the select list-

    <select class="form-control m-b-sm" name="selectbox" required-message="'Yo! This field is required..'"
                            required ng-model="form.Obj" ng-options="c.Name for c in Objlist track by c.Id">
        <option value="">Select</option>
</select>

The controller will appear as follows-

 angular.module('angular-validator-demo').controller('DemoCtrl', function($scope){

 $scope.Objlist = [
    {Id: '0', Name: 'Select'},
    {Id: '1', Name: 'USA'},       
    {Id: '2', Name: 'Canada'},
    {Id: '3', Name: 'Russia'}
];

  $scope.Obj = { Id: '0', name: 'Select' };

    $scope.submitMyForm = function(){
        alert("Form submitted");
    };

    $scope.myCustomValidator = function(text){      
        return true;
    };


    $scope.anotherCustomValidator = function(text){
        if(text === "rainbow"){
            return true;
        }
        else return "type in 'rainbow'";
    };

    $scope.passwordValidator = function(password) {

        if(!password){return;}

        if (password.length < 6) {
            return "Password must be at least 6 characters long";
        }

        if (!password.match(/[A-Z]/)) {
             return "Password must have at least one capital letter";
        }

        if (!password.match(/[0-9]/)) {
             return "Password must have at least one number";
        }

        return true;
    };
});

Tips for implementing dropdown control validation using AngularJS validators

Answer №1

Similar questions

express body parser is altering the date field within the body of a POST request

Navigating through the Table using AngularJS

Is there a newline and colon in the req.body from the post router?

Ways to verify if a specific extjs panel has finished loading

Sequentially animate objects with a fade-out and fade-in effect

Using THREE.js in the pre-render function

A method for arranging an array of nested objects based on the objects' names

How to use jQuery to dynamically set the value of a column span in a

Example when a specific $scope.apply() is needed:

Autocomplete feature in JQuery-UI that automatically selects the word when there is only one choice remaining

Encounter an error while attempting to store and retrieve an array of JavaScript objects in localStorage and parsing the data

Create a "load additional data" button

Setting cookies with NextJS Route API post middleware

show button after the page has finished loading

Ensuring the vue carousel component stops rendering once all of its data has been displayed

The input data from the MySQL database requires two page refreshes in order to be retrieved

Can anyone provide a simple example of PDF.js that allows for text selection in a minimalist design?

CORS headers present but AJAX request still fails

Invoke the C# function in the code-behind using an AJAX call

Having trouble with the installation of react-burger-menu