Here is my html
<form name="sales">
<div class="sale-type">
<p>Which would you like to sell?</p>
<fieldset class="md-form form-group">
<input ng-model="art.originalForSale" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2">
<label for="checkbox2">My Original ART</label>
</fieldset>
<fieldset class="md-form form-group">
<input ng-model="art.printForSale" name="printForSale" type="checkbox" class="filled-in" id="checkbox22">
<label for="checkbox22">Prints of my ART</label>
</fieldset>
</div>
<button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</form>
I want to display validation message that shows at least one check box required how can i do it
found a solution from this question How to require at least 1 checkbox for AngularJS Form Validation?
but it uses a script i want a solution without using scirpt
currently i am using
<span ng-show="part1.originalForSale.$error.required" class="error">Checkbox required</span>
I think that solve your problem:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<ng-form name="sales" ng-app >
<div class="sale-type">
<p>Which would you like to sell?</p>
<fieldset class="md-form form-group">
<input ng-model="art.originalForSale" value="cb1" name="originalForSale" type="checkbox" class="filled-in" id="checkbox2" ng-required="!art.printForSale">
<label for="checkbox2">My Original ART</label>
</fieldset>
<fieldset class="md-form form-group">
<input ng-model="art.printForSale" value="cb2" name="printForSale" type="checkbox" class="filled-in" id="checkbox22" ng-required="!art.originalForSale">
<label for="checkbox22">Prints of my ART</label>
</fieldset>
</div>
<span ng-show="sales.$invalid" class="error">Checkbox required</span>
<button type="submit" ng-disabled="sales.$invalid" class="btn-form btn-next c-sprite" alt="Submit"></button>
</ng-form>
You can use ngRequired directive. There is a simple example.
<input name="checkbox1" type="checkbox" ng-model="isChecked1" ng-required="isChecked2">
<input name="checkbox2" type="checkbox" ng-model="isChecked2" ng-required="isChecked1">
You can use ngMessages for validation message
<div ng-messages="myForm.checkbox1.$error || myForm.checkbox2.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not select a checkbox !</div>
</div>
Have you tried below?
<span ng-show="!(art.printForSale || art.originalForSale) " class="error">Checkbox required</span>
Use this with $dirty if you want to show the message after submit form.
write required attributes in input tag for showing msg
<span ng-show="frmRegister.name.$dirty && frmRegister.name.$error.">this is req...</span>
Related
I have a weid thing happening with my Bootstrap 4 form validation where with two radio buttons have their label's foreground being changed to green when the form is validated. If the form is invalid, the labels don't change to red. Either way, they should persist their black foreground because the radio button inputs do not have the required attribute associated with them like my other form elements. Why would they turn green and how may I prevent this or stop form validation from occurring on these two entities?
index.html
<form id="signup-form" novalidate>
<div class="form-group">
<h1>Sign Up</h1>
<p>Use this form to enter your name and email to sign up.</p>
</div>
<!-- Name -->
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstNameInput">Name</label>
<input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col">
<label for="lastNameInput">Last</label>
<input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="emailAddressInput">Email address</label>
<input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="name#example.com" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<!-- Options -->
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
<label class="form-check-label" for="type1RadioButton">
Type 1 user
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
<label class="form-check-label" for="type2RadioButton">
Type 2 user
</label>
</div>
</div>
<!-- Submit Button -->
<div class="form-group">
Submit
</div>
</form>
script.js
$(document).ready(function() {
$("#submitButton").click(function() {
//Fetch form to apply custom Bootstrap validation
var form = $("#signup-form")
alert(form.prop('id')) //test to ensure calling form correctly
if (form[0].checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated')
})
})
Result
Before form validation
After form validation
When the form is validated with HTML5, the :valid state (or :invalid on validation failure) is applied to all of the form inputs. I don't know of a way to prevent the :valid state from being applied to specific inputs.
Once :valid has been applied to the input, Bootstrap has this CSS which makes the label green...
.was-validated .form-check-input:valid~.form-check-label {
color: #28a745;
}
To override the green style that Bootstrap is applying, use the text-dark class on the label. This way the label will always be black, and not green(:valid) or red(:invalid).
https://www.codeply.com/go/gvR4ArUPKL
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
<label class="form-check-label text-dark" for="type2RadioButton">
Type 2 user
</label>
</div>
I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>
Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!
You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing
<form method="post" action="../SubCategory">
<div id="destinationFields">
//after the page loaded i will drag and drop some divs fromsourceFields by jquery plugin
</div>
<button type="submit" id="button">Add</button>
</form>
<div id="sourceFields">
<div>
<label class="control-label" id="label" for="Name">size:</label>
<input type="hidden" value="1" name="labelValue" />
</div>
<div>
<label class="control-label" id="label" for="Name">Brand :</label>
<input type="hidden" value="2" name="labelValue" />
</div>
<div>
<label class="control-label" id="label" for="Name">width:</label>
<input type="hidden" value="3" name="labelValue" />
</div>
</div>
this is how the page is loading, there are some elements(divs) out of the form (you can see that in sourceFields)
i will drag and drop it into destinationFields but after i press submit and check in the sevlet the changes are not done
(i think it means the actual html is not changing)
Using Ajax call .
For more detail visit given url:-
http://www.programming-free.com/2012/08/ajax-with-jsp-and-servlet-using-jquery.html
I am creating a contact form, I have two inputs, of type="checkbox"; the first one is email, and is already checked, but I want to uncheck this, in the event that the user picks the "Phone" option, and show the phone input in which to enter the phone number.
Here's the code:
at JS Fiddle
I hope you guys can help me, I'm still a js newbie but I have learnt a lot.
HTML
Name *:
<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">
<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>
<div>
<p>Phone: </p>
<input type="checkbox">
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed">
</div>
<div class="SendButton">
Send
</div>
</form>
</div>
</div>
Javascript
$('#ChatContainer').hide();
$('.NoDisplayed').hide();
$('#ChatToggle').click(function(){
$('#ChatContainer').toggle('slow');
});
Thank you.
I'd suggest associating your 'preferred contact' choices together, using radio-inputs (since 'preferred' is an exclusive choice to make, whereas 'acceptable' might include all possible options), giving:
<label for="">Best form to contact</label>
<div>
<p>Email:</p>
<input type="radio" name="contact" value="email" id="email2" checked="checked" />
</div>
<div>
<p>Phone:</p>
<input type="radio" name="contact" value="phone" />
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</div>
Which would work with the following jQuery:
$('input[type="radio"][name="contact"]').on('change', function(){
$('#phonecheck').toggle(this.value === 'phone');
});
JS Fiddle demo.
It's worth also noting that your HTML is somewhat problematic; your <label> elements weren't associated with any (let alone 'specific') form-elements; you were using a <label> simply to provide a form's section-name (for which the <legend> attribute should be used, within a <fieldset> grouping). That said, I've corrected your HTML and moved the phone-number entry box outside of the <div> that was containing the checkbox (and now contains a radio-input), to reduce the jarring effect of the <form> suddenly being displaced. There's still a bit of a jump, but not quite so profound.
Here's the amended HTML, which still works with the above jQuery:
<div id="ContactForm">
<div id="ChatToggle">
<p>Contact Us</p>
</div>
<div id="ChatContainer">
<form action="">
<label>Name <span>*</span>:
<input type="text" placeholder="Your Name (Required)" />
</label>
<label>Email <span>*</span>:
<input type="email" placeholder="Email (Required)" />
</label>
<label>Got a question? <span>*</span>:
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
</label>
<fieldset>
<legend>Best form to contact</legend>
<div>
<label>Email:
<input type="radio" name="contact" value="email" id="email2" checked="checked" />
</label>
</div>
<div>
<label>Phone:
<input type="radio" name="contact" value="phone" />
</label>
</div>
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</fieldset>
<div class="SendButton"> Send
</div>
</form>
</div>
</div>
JS Fiddle demo.
References:
CSS:
Attribute-equals (attribute="value") selector.
HTML Elements:
<fieldset>.
<label>.
<legend>.
<input />.
jQuery:
on().
toggle().
Try this code:
var $checkPhone = $('#checkPhone');
var $checkMail = $('#checkMail');
var $phonecheck = $('#phonecheck');
$checkPhone.change(function(data) {
$checkMail.attr("checked", false);
if (this.checked) {
$phonecheck.show();
}
else {
$phonecheck.hide();
}
});
$checkMail.change(function(data) {
$checkPhone.attr("checked", false);
$phonecheck.hide();
});
remove the class NoDisplayed form the phone element and repelace it by style="display: none;"
http://jsfiddle.net/dL36kccw/8/
Addition:
Doing such stuff with jQuery is not the easiest. You often end up in placing some DOM manipulations in several places which makes the code less maintainable (like the $phonecheck.hide(); in this case.
I can strongly recommend to take a look into Knockout or some other UI framework. A good list of frameworks + examples can be found on todoMVC. I think Knockout is the best for many cases. Backbone is very competitive, too. But in the end you need to find one that reflects your needs and style.
Edit: Fixed the bug with unchecking the pohne.
You just need to handle the change event of the phone checkbox:
$("#chkPhone").on("change", function () {
$("#email2").prop("checked", !($(this).is(":checked")));
});
http://jsfiddle.net/dL36kccw/5/
// I have just added id (id -->"phone" to checkbox for corresponding phone number text box and added style="display:none;" to phone number text
<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">
<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>
<div>
<p>Phone: </p>
<input type="checkbox" id="phone">
<input type="text" placeholder="Give us your phone" id="phonecheck" style="display:none;">
</div>
<div class="SendButton">
Send
</div>
</form>
</div>
</div>
// please try this script
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#phone').click(function(){
if($('#phone').is(':checked'))
{
$('#phonecheck').show();
}
else
{
$('#phonecheck').hide();
}
});
</script>
I have a simple form for gathering text and choice data like -
HTML Form -
<div class="form-group">
<label class="col-sm-2 control-label">Event Name<span class="asterisk">*</span></label>
<div class="col-sm-1">
<input type="text" placeholder="Music Concert at Las Vegas" ng-model="event.name" required="required" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Is Active<span class="asterisk">*</span></label>
<div class="col-sm-1">
<input type="radio" name="is_active" ng-model="event.is_active" value="yes" checked="checked" class="form-control"> Yes
</div>
<div class="col-sm-3">
<input type="radio" name="is_active" ng-model="event.is_active" value="no" class="form-control"> No
</div>
</div>
And in my controller -
$scope.event.is_active = "yes";
Now the problem I am facing is -
If I remove the $scope.event.is_active = "yes" from the controller "Yes" option should remain works due to the presence of checked="checked" HTML attribute set, but it won't.
Now If I remove the checked="checked" attribute so whether do I have $scope.event.is_active = "yes" in my controller or not it won't work i.e not of the option is pre checked.
Let me know what I am missing with here with the angular way.