DMXzone App Connect Support Product Page
Not a problem
app connect breaks - Bootstrap validation - Focus to required field
Reported 21 Nov 2017 09:48:19
1
has this problem
21 Nov 2017 09:48:19 Reinhardt Ellis posted:
I have a form of about 50 fields.... but for my sample ill only post 3.....I have used BOOTSTAP 3 as per your extension.... and then created a form.
So all is working great with the form and standard validation... eg focuses back on the required fields when not filled in......
I cannot use your VALIDATION script as there is no FOCUS on required fields... see...
www.dmxzone.com/support/32902/topic/63099
BUT now i add APP CONNECT... .. then it does NOT allow the focus back onto the required fields... as soon as you add APP CONNECT ,,,,
So this works... without the dmxAppConnect.js file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script>
</head>
<body>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors">Hey look, this one has feedback icons!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
</html>
So the next obvious step would be to create a database connection and use APP CONNECT ... for this form once again.. ill be using sample code.
But once you add this APP CONNECT js.. it disables the auto focus function on required fields...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
</head>
<body id="insert_data" is="dmx-app">
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors">Hey look, this one has feedback icons!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
</html>
So if I use the APP CONNECT and DMXVALIDATOR... you will see it never focuses back to the REQUIRED field.. this is a problem when you have a long form eg 50 fields... because when you press the submit button it never focuses back to the required fields.. .. does anybody maybe have a solution.. or a POP up msg idea..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
<script type="text/javascript" src="bootstrap/3/js/dmxBootstrap3Forms.js"></script>
<link rel="stylesheet" type="text/css" href="dmxAppConnect/dmxValidator/dmxValidator.css" />
<script type="text/javascript" src="dmxAppConnect/dmxValidator/dmxValidator.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxFormValidator.js"></script>
</head>
<body id="insert_data" is="dmx-app">
<form data-toggle="validator" role="form" name="product_form" id="product_form" data-dmx-validate="true">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors">Hey look, this one has feedback icons!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
</html>
Replies
Replied 21 Nov 2017 11:48:27
21 Nov 2017 11:48:27 Teodor Kuduschiev replied:
Hello Reinhardt,
As i already explained you in the other topic, App Connect Form Validator does not support jumping back/focusing the error field in the current version, probably this will be integrated in the future updates.
I am not really sure what exactly your sample is showing? Are you using some 3rd party script to validate your form?
As i already explained you in the other topic, App Connect Form Validator does not support jumping back/focusing the error field in the current version, probably this will be integrated in the future updates.
I am not really sure what exactly your sample is showing? Are you using some 3rd party script to validate your form?
Replied 21 Nov 2017 11:56:52
21 Nov 2017 11:56:52 Reinhardt Ellis replied:
Hi Teodor...
What im trying to explain is that even without using DMX Form Validator ... just using the standard Bootstrap 3 extension... the App connect breaks the auto focus.
Just create a small form.. say 3 fields with bootstrap.. NO App connect.. then you will the built in validator of bootstrap will auto focus back to the required field.
But once you add App Connect to this form .. it wont auto focus anymore to the required fields.. that is taking DMX Form Validator completely out of the picture.
Im just referring to Bootstap 3 and App Connect... Why would App Connect break the "standard" bootstap 3 validation
What im trying to explain is that even without using DMX Form Validator ... just using the standard Bootstrap 3 extension... the App connect breaks the auto focus.
Just create a small form.. say 3 fields with bootstrap.. NO App connect.. then you will the built in validator of bootstrap will auto focus back to the required field.
But once you add App Connect to this form .. it wont auto focus anymore to the required fields.. that is taking DMX Form Validator completely out of the picture.
Im just referring to Bootstap 3 and App Connect... Why would App Connect break the "standard" bootstap 3 validation
Replied 21 Nov 2017 12:08:59
21 Nov 2017 12:08:59 Teodor Kuduschiev replied:
Hello Reinhardt,
It is not breaking anything - that is how app connect handles forms.
As already explained:
Please do not post the multiple topic about the same question. You will be notified when there is a progress.
It is not breaking anything - that is how app connect handles forms.
As already explained:
Please do not post the multiple topic about the same question. You will be notified when there is a progress.
Replied 21 Nov 2017 12:15:19
21 Nov 2017 12:15:19 Reinhardt Ellis replied:
Thank you Teoder .... Ok App Connect takes then priority when included.. 
.. it takes over the validation function then..thank you for clearing that up .. So I understand what you are saying .. is there maybe some sort of a manual "alert" message i can call with javascript / jquery to place infront of the submit button to appear when the submit button is pressed (to appear when a field at the top of the form is required).. at least this will solve the "focus" problem and "alert" the user that something is missing...
.. it takes over the validation function then..thank you for clearing that up .. So I understand what you are saying .. is there maybe some sort of a manual "alert" message i can call with javascript / jquery to place infront of the submit button to appear when the submit button is pressed (to appear when a field at the top of the form is required).. at least this will solve the "focus" problem and "alert" the user that something is missing... Replied 21 Nov 2017 13:01:35
21 Nov 2017 13:01:35 Teodor Kuduschiev replied:
Please check your email. I've sent you an updated app connect js file.
Replied 21 Nov 2017 13:10:41
21 Nov 2017 13:10:41 Reinhardt Ellis replied:
Thank you Teodor this works like a charm.. thank you for doing this... saved me a lot of headaches .,.. always great support.
thank you for doing this... saved me a lot of headaches .,.. always great support.