So, I am starting with a requirement of disabling submit button if the required field is not being filled.
<form name="form">
<input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/>
<input type="text" placeholder="First Name" data-ng-model="model.lastName" name="lastname" ng-required="true" /><br/>
<button type="button" ng-disabled="form.$invalid">Submit</form>
So far so good. However, if there are additional validation field as follow, the above will not work as the requirement is to only disable submit button if the required field is not being filled only regardless of other validation.
<form name="form">
<input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" ng-minLength="5" /><br/>
<input type="text" placeholder="Last Name" data-ng-model="model.lastName" name="lastname" ng-required="true" ng-minLength="3" ng-maxLength="10" /><br/>
<button type="button" ng-disabled="form.$invalid">Submit</button>
</form>
I could have wrote a bloated solution independently $watch the changes of each of the input value for each and every form in controller, but it is tedious and not reusable. What am i expecting is something more generic as follow:
<button type="button" ng-disabled="!form.$required">Submit</button>
Perhaps I missed out something/some existing function that is already available. But I think that to disable submit button until all required field is being filled is something very common for UX/UI.
AFAIK there is no easy solution like you have mentioned, You can write a directive including form directive and set a flag in form(by watching the ng-required form fields)
Or, in controller with form have a scope function like
function disableSubmit() {
return form.FirstName.$error.required || form.LastName.$error.required;
}
<button type="button" value="SAVE" ng-disabled="disableSubmit()">Submit</button>
Adding the #kubuntu's jsFiddle here.
http://jsfiddle.net/3eqz2/421/
Related
I'm very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/
use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}
I have an doubt in my Register form incase i enterthis is correct format but fake id it is Acceptable my form .Any idea to Avoid to this problem....And Also I use the following code for name field text box it Allow many space i Want Only One Space in that text-box ... Any Idea?
<input type="text" class="form-control" id="name" name="name" placeholder="Name" onkeyup="this.value=this.value.replace(/[^a-zA-Z ]/g,'');"required>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" onkeyup="this.value=this.value.replace(/[^a-zA-Z ]/g,'').replace(/\s\s+/g, ' ');"required>
I want form value to be replace with xml value while submit and match the user and pass for login ..
XML Data hosted
in place of GlobalID i have user and languageid i have pass
Form Body :-
<input type="text" value="username" placeholder="enter user name"><br>
<input type="password" value="password" placeholder="enter password"><br>
<input type="text" value="macid" placeholder="Mac ID"><br>
<input type="text" value="version" placeholder="Version"><br>
<button class="actionSubmit" onclick="loginValidation()" type="submit">Login </button>
Help me to fix this. i need to do with js or jquery
Related fiddle:
http://jsfiddle.net/v86Dv/4/
The "First Name" field is validated as expected when the "submit" button is clicked.
But, fields added via the "click here to add field" link are not validated.
How can I get parsely.js (http://parsleyjs.org) to validate those fields?
Related code from fiddle:
HTML:
<form id="myForm" method="post" data-parsley-validate novalidate>
<p>Click here to add field</p>
<p><label>First Name</label>
<input type="text" name="firstName" value="" required data-parsley-trigger="change" /></p>
<p><input type="submit" value="submit" /></p>
</form>
JavaScript
$('#addField').on('click', function(){
$('input[type="submit"]').before('<p><label>Another Field</label> <input type="text" name="anotherField" value="" required data-parsley-trigger="change" /></p>');
});
I'm afraid in your fiddle you are using 1.2.3 Parsley version, that does not support natively dynamic field adding / removing. Please consider using 2.x version. Best
This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();
You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!