HTML5 Validierung mit einem Link und angular.js

Question

Ich habe eine einfache Form in drei Abschnitte unterteilt. Im ersten Abschnitt sammle ich Vorname, Nachname und E-Mail.

Ich versuche type="email" und required zu verwenden, um Validierungsfeedback zu geben, aber ich verwende input submit bis zum letzten Abschnitt des Formulars nicht.

Das Formular wird in drei Abschnitten gebrochen jeder Abschnitt nur gesehen wird, sobald der Benutzer

<a ui-sref="form.select" class="btn btn-block btn-info" > 
      Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
     </a> 

klickt würde ich diesen Klick mag die Validierung auslösen, dass die Art und Weise einreichen in der Regel würde.

Deaktivieren Sie diese Schaltfläche auch, bis der Benutzer die Felder ausfüllt. Hier

ist die vollständige Form Code

<div class="form-group"> 
    <label for="first-name">First Name*</label> 
    <input type="text" class="form-control" name="Fname" placeholder="Enter first name" ng-model="formData.Fname" required> 
</div> 

<div class="form-group"> 
    <label for="last-name">Last Name*</label> 
    <input type="text" class="form-control" name="Lname" placeholder="Enter last name" ng-model="formData.Lname" required> 
</div> 

<div class="form-group"> 
    <label for="email">Email*</label> 
    <input type="email" class="form-control" name="email" placeholder="Enter a valid email address" ng-model="formData.email" required> 
</div> 

<div class="form-group row"> 
    <div class="col-xs-6 col-xs-offset-3"> 
     <a ui-sref="form.select" class="btn btn-block btn-info" > 
      Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
     </a> 
    </div> 
</div> 

FRAGE

Also meine Frage, wie die HTML 5 Validierung auf den Button klicken zum Laufen zu bringen, und wie deaktivieren Taste, bis Felder korrekt bevölkert?

Answer 1

Sie könnten den nächsten Abschnitt Link zu einem <button> und ng-disabled verwenden ändern. ng-disabled funktioniert nicht mit <a> Elementen. Entweder schreiben Sie einfach alle Bedingungen in ng-disabled oder wenn es zu lang/kompliziert wird schreiben Sie eine Controller-Funktion zu überprüfen.

<button ui-sref="form.select" ng-disabled="myform.first_name.$invalid || ...."> 
    Next Section 
</button> 

<button ui-sref="form.select" ng-disabled="isButtonDisabled()"> 
    Next Section 
</button> 

Wenn Sie <a> verwenden, werden Sie den Link selbst deaktivieren. Zum Beispiel:

.disabled { 
    cursor: not-allowed; 
} 

<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a> 

$scope.disabled = function() { 
    if($scope.addInviteesDisabled) { return false;} 
}  

Answer 2

Wenn Sie die Taste deaktivieren mögen, bis alle Felder, die nicht mit gültigen Daten eingefügt werden versuchen, die diese

<a ui-sref="form.select" class="btn btn-block btn-info" ng- 
disabled="formData.$invalid" >Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
</a> 

Answer 3

Sie können dies als Referenz verwenden:

<form name="upSign"> 

     First Name: 
      <input type="text" name="firstName" placeholder="Enter your first name" ng-model="user.first_name" required> 


     Last Name: 
      <input type="text" name="lastName" placeholder="Enter your last name" ng-model="user.last_name" required> 


     Email: 
      <input type="email" name="mailId" ng-model="user.email_id" placeholder="Enter your Email" required> 

    </form> 

    <p ng-show="upSign.firstName.$invalid || upSign.mailId.$invalid || upSign.lastName.$invalid" style="color: red">* Invalid</p> 


    <button class="button button-full button-positive" ng-disabled="upSign.firstName.$invalid || upSign.mailId.$invalid || upSign.lastName.$invalid || upSign.firstName.$untouched || upSign.mailId.$untouched || upSign.lastName.$untouched" ng-click="register()">Register Me</button>