Validation required in custom code

Hi,
i use the custom code form instead of the wizard designer because i like the bootstrap 3 form component and want to have a clear form without any wizard preassigned classes in divs.

[attachment=0]problem.jpg[/attachment]
Like you see, the custom code works fine but i have some troubles to set required fields.

<hr>
	<div class="form-group">
		<!-- Spiel - Datum  -->
		<label class="col-md-2 col-xs-4 control-label">Datum:</label>
		<div class="col-md-4 col-xs-8">
			<input name="spiel-datum" id="spiel-datum" data-gdatetimepicker-format="Y-m-d" class=" form-control A" type="text" data-gdatetimepicker="1" />

		</div>
		<!-- Spiel - Uhrzeit  -->
		<label class="col-md-2 col-xs-4 control-label">Uhrzeit:</label>
		<div class="col-md-4 col-xs-8">
			<input name="spiel-uhrzeit" id="spiel-uhrzeit" placeholder="13:00:00" class=" form-control A" data-inputmask="'alias' : 'hh:mm:ss'" type="text" />

		</div>
	</div>
	<hr>

In this part of the code i use the datetimepicker for the date (Y-m-d) and a input mask for the time (H:m:s). Actually i want these two fields requiered. I used the Wizard designer to get the code for this validation type. ->

class="validate['required'] form-control A"

So i copied this code into my custom-form into the input class. Now, these two fields are requiered but the datetimepicker and the input-mask are disabled. I have to set the input manually without any help of the two functions.

I don't know, what i'm doing wrong so please help me to get both settings work

Hi Xzeroed,

Please try class="validate['required']"

Bob

Tried this, same result.

Both fields are now required (if i want to submit the data-inputs) but the date-calender doen't appear anymore and the time mask can be overwritten.

Hi Xzerod,

Then it sounds as though there is a JavaScript error on the page/ Do you see one your browser web developer tools
Console?

Bob