Currently, I'm in the process of building a web application that involves 4 radio buttons. My main focus now is on validating these radio buttons to ensure that none are checked by default. In the scenario where the user tries to submit the form without selecting any radio button, I would like an error message to be displayed.
<form name="payment" novalidate>
<fieldset ng-disabled="paymentform">
<div class="upload-button-container">
<div class="upload-button bank button1">
<div class="upload-button-icon">
<label for="visa" class="visa">
<img src="images/visa.png">
<input type="radio" id="visa" name="selector" ng-model="card">
<span class="selector-visa"></span>
</label>
</div>
</div>
<div class="upload-button bank button2">
<div class="upload-button-icon">
<label for="americanexpress" class="americanexpress">
<img src="images/americanexpress.png">
<input type="radio" id="americanexpress" name="selector" ng-model="card">
<span class="selector-americanexpress"></span>
</label>
</div>
</div>
</div>
<div class="button-container margin-top80">
<input type="submit" value="{{ 'BACK' | translate }}" class="brown-button">
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="makepayment()">
</div>
</fieldset>
</form>
In order to validate this, I'm aiming to implement some JavaScript into the code:
$scope.makepayment = function () {
if($scope.card != null) {
} else {
toastr.error($filter('translate')('Error Occured', ''));
}
}
Despite my efforts, the above code consistently returns null. Can anyone point out what might be missing or incorrect here? Any assistance provided would be greatly appreciated. Thank you.