SL AM Newsletter Anmeldung

Formvalidierung mit der Option, sich für mehrere Newsletter anzumelden (Bedingung: mind. einer muss ausgewählt sein)

by Jeannette Holz

HTML

<div ng-controller="mainController">
    <form name="myForm" action="https://www.xcampaign.ch/dispatcher/service" method="post">
    <input type="hidden" name="ac" value="reg">
	<input type="hidden" name="clientCode" value="131220153648831949">
	<input type="hidden" name="doubleOptin" value="1">
    <input type="hidden" name="gotoUrl" value="http://swisslife-news.com//jsp/nologin/ProcessRegForm.jsp">
	<input type="hidden" name="gotoErrorUrl" value="null">
    <input type="hidden" name="xp_sendBackParams" value="0">
    <input type="hidden" name="Sprache" value="DE">
    <input type="hidden" name="abonnement" ng-model="abonnement" required />    
        
        
        <label for="EMail">E-Mail Adresse*</label>
        <input type="email" name="EMail" ng-model="EMail" ng-class="{fail:!myForm.EMail.$valid}" required /><br />
        
        <label for="Anrede">Anrede*</label>
        <select type="text" name="Anrede" ng-class="{fail:!myForm.Anrede.$valid}" ng-model="Anrede" required /><option value="#DEL#">nicht ausgewählt</option><option value="Frau">Frau</option><option value="Herr">Herr</option></select><br />
        
        <label for="Vorname">Vorname</label>
        <input type="text" name="Vorname" ng-model="Vorname" required autofocus/><br />    
        <label for="Nachname">Nachname*</label>
        <input type="text" name="Nachname" ng-class="{fail:!myForm.Nachname.$valid}" ng-model="Nachname" required /><br /><br />
   
        <div class="section">
            <label>Abonnements*</label>
            <span ng-class="{fail:!myForm.abonnement.$valid}">
                <div ng-repeat="abonnement in abonnements">
                   <input  type="checkbox"
                       name="{{abonnement.id}}"
                       ng-model="abonnement.value"
                       ng-true-value="1"
                       ng-false-value="0"
                       ng-change="validate()"
                    /> {{abonnement.label}}
                </div>
      ...

CSS

.fail{
    border:2px solid red !important;
}

.debugger{
    display:block;
    margin-top: 40px;
    padding:10px;
    color: silver;
    font-size: 0.8em;
}

label{
    display: inline-block;
    width: 250px;
}

input[type=text], input[type=email], select[type=text] {
    width: 200px;
}

input[type=submit]{
    margin-top:2px;
    width: 154px;
}

div.section{
    display: block;
    vertical-align:top;
}
div.section label{
    float: left;
}

div.section span{
    display: inline-block;
    width: 250px;
    margin-left: 2px;
    border: 2px solid white;
}

body{
    font-family: calibri;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function($scope) {
    $scope.abonnements = [
        { id:'vwl_ausblick', label : 'Volkswirtschaftlicher Ausblick', value : '1' }, 
        { id:'financial_outlook', label : 'Finanzmarktausblick', value : '0' },
    ]    
        
    $scope.validate = function () {
        var totalabonnements = 0;
        for (var x in $scope.abonnements) {
            totalabonnements += parseInt($scope.abonnements[x].value);
        }
        if( totalabonnements == 0 ){
            $scope.abonnement = '';
        } else {
            $scope.abonnement = totalabonnements;
        }
    };
    $scope.validate();
        
});