Checking the current password using AngularJS and Laravel for custom validation techniques

I initiated an angular + laravel project yesterday, but I encountered an error in angular which has halted my progress.

Below is the code snippet:

<div class="form-group" ng-controller="CheckPawd">
  <label>Current Password</label>
  <input type="text" name="cpwd" ng-model="cpwd" ng-keyup="checkerPwd()" class="form-control" placeholder="Enter Current Password" required>
  <p class="invalid" ng-show="!pwdChnge.cpwd.$pristine && pwdChnge.cpwd.$error.required">&#x21E7; Current Password is required</p>
  <p class="invalid" ng-show="checker">&#x21E7; Current Password is not matching</p>
</div>

Angular Controller:

app.controller('CheckPawd',function($scope,$http){
  $scope.checkerPwd = function(){
        $http({
        method:'post',
        url:'checkPwd',
        data:$.param({pwdd:$scope.cpwd})
    }).success(function (data,response){
    console.log(data);
    if(data=="1"){
        $scope.checker=null;
    }else{
        $scope.checker = data;
    }
    });
  };
});

Laravel Function:

public function checkPwd()
{
    if(Hash::check(Input::get('pwdd'), Auth::user()->password))
    {
        return 1;
    }else{
        return 0;
    }
}

This segment is related to the password change feature. There are three fields in total:

Current password, New password, Confirm New Password

During the entry of the current password, I aim to validate it using an API.

How can I implement custom validation rules? The current code does not allow me to disable the submit button upon encountering an error in the API response.

Any suggestions on resolving this issue?

Answer №1

One effective approach to validating a password using an asynchronous $http request in Angular is by utilizing a directive with an async validator.

For a detailed illustration, check out this helpful example on how to integrate a validator into ngModel.$asyncValidators.

Given that password validation can be resource-intensive, it's advisable to employ ng-model-options with debounce to ensure the verification occurs only every 500ms or upon keyup https://docs.angularjs.org/api/ng/directive/ngModelOptions

ng-model-options="{ debounce: { default: 500 } }"  

Alternatively, you can use:

ng-model-options="{ updateOn: 'keyup blur' }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for filtering only alpha versions, such as those labeled 1.0.0-alpha.*

Is it possible to specifically target -alpha versions of a package using semver and NPM? The common approaches like using 1.0.0-alpha.x or * do not seem to work as expected due to how the version elements are interpreted. The usage of ~1.0.0-alpha also do ...

Is it possible to execute a function within an HTML page simply by clicking on it?

As someone who is new to the world of HTML, CSS, and JS, I'm currently facing a challenge: On my website's page1.html, I have implemented a feature that allows users to sort different articles on the page by selecting a sub-menu from the navigat ...

Offering various language options on a website determined by the URL

I've been contemplating how to add multi-language support to my personal website, which I developed using ExpressJS and NodeJS with EJS as the template engine. Currently, the website is only available in English, but I want to add a German version as ...

After attempting to publish my NPM package, I encountered an issue where I received an empty object. This occurred despite utilizing a setup that includes ES6, Babel,

Is there anyone out there who can assist me with this issue? I am attempting to publish an npm package with the following configuration: webpack: production: { entry: [ './src', './src/app.scss', 'draft- ...

JavaScript not functional, database being updated through AJAX calls

I have created a game using Phaser, a JavaScript library for games. Now I am looking to implement a score table using JS/PHP. My main focus is on transferring a variable from JS to PHP in order to update the database. I have researched numerous topics and ...

Using PHP to ascertain the requested dataType or responseType from the client

My ajax request is fairly simple: $.post('server.php',data, function (json) {console.log(json)},'json'); I have configured jQuery to expect json data based on the dataType setting. Question: Is the dataType parameter equivalent to re ...

One way to incorporate if / else if statements into a function within a Class component is by using conditional logic in React alongside Node and Express

I'm looking to refactor my code and extract the if/else if statements for error handling out of the component. How can I export this logic to another file and then import it back into my main component? Here's an example of the code: // PASSWOR ...

Utilizing Vue to Transform Unicode Characters into HTML Elements

I have a scenario where an API response contains a Unicode string that needs to be displayed correctly in the view. Despite Vue treating it as a string and not automatically converting it to HTML, I believe JavaScript should handle the rendering process. ...

Organize table information using rowspan functionality

View of Current Table I am looking to implement a side column in my table using rowspan to group dates within each pay period. The goal is for a supervisor to be able to create a new pay period, which will assign a unique integer in the database and then ...

Various Issues Regarding Jquery Libraries

Here's a question on my mind... Currently, in my main file index.php, I have imported jquery 2.0.3 like this: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> The issue arises bec ...

Is TypeScript being converted to JavaScript with both files in the same directory?

As I begin my journey with TypeScript in my new Angular project, I find myself pondering the best approach for organizing all these JS and TS files. Currently, it appears that the transpiler is placing the .js files in the same directory as the correspondi ...

Display the div only if the content matches the text of the link

Looking for a way to filter posts on my blog by category and display them on the same page without navigating away. Essentially, I want users to click on a specific tag and have all posts with that tag show up. Since the CMS lacks this functionality, I pla ...

Discovering image file extensions in JavaScript using regular expressions

Can anyone provide me with a javascript regular expression to validate image file extensions? ...

What is the best way to send a parameter to a component in Vue.js without including it in the URL during routing?

One of my Vue.js components is a SideBar that retrieves JSON data. The JSON data consists of names that correspond to specific URLs which in turn contain more JSON data. { "applicants": "url1", "applications": "url2" ...

"Enhance your website with a stylish Fancybox feature that includes a

I am attempting to submit a form within an ajax fancybox and utilize a validation engine for validation. Following the validation and submission, I would like the current fancybox to close and then load another page in a new fancybox through a sequence of ...

Updating default values in reactive() functions in Vue 3: A step-by-step guide

Currently, I am in the process of developing an application using Nuxt 3 and implementing the Composition API for handling async data. The specific scenario I am facing is this: I have a page that displays articles fetched from the database using useLazyFe ...

What is the best way to retrieve data from MySQL for the current month using JavaScript?

I need to retrieve only the records from the current month within a table. Here is the code snippet: let startDate = req.body.startDate let endDate = req.body.endDate let result = await caseRegistration.findByDate({ p ...

Retrieve all documents with a matching objectId field in MongoDB

I built an API that can fetch all data from a table, but within this table there is an object ID reference to a user. Table 1 - Story | Table 2 - User api.get('/all_stories', function(req, res) { Story.find({}, function(err, stories) { ...

I've noticed that the NextJs router appears to be significantly slower in comparison to React

I currently have a website that is built in both React Js and Next Js. The issue I am currently encountering is that the router in NextJs is noticeably slower compared to react-router-dom. It takes almost 2-3 seconds to change the route. To experience th ...

Vuejs Todolist List App experiences unanticipated alteration in task prop

I own a store that includes state, mutation, getters, and more. Within the state, there is a list of tasks like the ones shown below. const state = { tasks:[{ title: "Wake up", completed: false }, { title: "Item 2&quo ...