CODEWITHSUNDEEP
javascriptjqueryangularjsformsvalidation
Sam Fullen
Sam Fullen

Reputation: 67

Is there a way to validate a part of a form on the click of a button without actually submitting the form first?

So basically I have a form that uses some Angular, it is a register form and has quite a lot of fields so for a better user experience we decided to use angular to create a 'next' button half way through the form which takes the user to the second half of the form without refreshing the page. However, using basic validation like required is complicated because if the user misses something on the first page and then clicks the submit button on the second page, the 'this field is required' message will flash up but the user cannot see it because it appearing on the first screen.

Is there a way to validate each half of the form separately using something like angularJS or jquery validation plugin? I.e. can I validate the first half of the form when I click the 'next' button so the user cannot get onto the second half of the form without first filling in the first half.

Just a quick note: I tried using the Jquery Validation plugin but as I am also using angular so when I click the next button it does validate once, but then still allows me to move on to the next page.

Hope this question makes sense, cheers!

Upvotes: 2

Views: 2108

Answers (3)

piterio
piterio

Reputation: 810

Maybe you can use the keyup function. Something like this:

$("input[type='email']").keyup(function(evt){
     validate($(this).val());
});

Where validate is a function where you check the input's value.

Anyway, if you want use the keyup function you can do something like this.

Upvotes: 0

Shuvro
Shuvro

Reputation: 1499

You can do this in angular way completely as you are using angular in your form. You can also add a check inside your submit function whether any field is invalid before sending the post request too.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<div ng-show="!next">

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
    <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
    <span ng-show="myForm.email.$error.required">Email is required.</span>
    <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>
<input type="button" ng-disabled="myForm.user.$invalid || myForm.email.$invalid" ng-click="movenext()" value="Next" />
</div>

<div ng-show="next">
  <input type="button" ng-click="prev()" value="Previous" /><br>
<p>Password:<br>
  <input type="password" name="password" ng-model="password" required>
  <span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
    <span ng-show="myForm.password.$error.required">Password is required.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.password.$invalid">
</p>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.next = false;
    
    $scope.movenext = function(){
      $scope.next = true;
    }
    $scope.prev = function(){
      $scope.next = false;
    }
});
</script>

</body>
</html>

Upvotes: 3

LiranBo
LiranBo

Reputation: 2136

try:

$("#form").validate();

you can also chose which elements to try and validate using:

$("#form").validate().element("#id");

this will manually fire the validation process without submitting the results, and it will also let you chose what elements you want to validate.

Upvotes: 3

Related Questions