Checkbox check event validate without Javascript? - javascript

I have tried but haven't got any solution.
Lets say there is checkbox with label "AGREE TO TERMS AND CONDITIONS". Is it possible to modify color of label text with checkbox checked / unchecked event without using Javascript / Jquery ?

Aside from the required attribute M. Kejji points out, which is the right way to do this, there's a CSS way as well:
It's possible to do this client-side within restrictions, sort of, but it's ugly. And it doesn't really prevent form submission, it just prevents showing the submit button.
Basically, you can use the CSS :checked pseudo-class and (say) an adjacent sibling combinator to hide the submit button if it's not checked:
.disable-submit + input[type=submit] {
display: none;
}
.disable-submit:checked + input[type=submit] {
display: inline;
}
<p>Tick and untick the box</p>
<form>
<input type="checkbox" class="disable-submit">
<input type="submit" value="Send">
</form>
I'm not suggesting it, just saying it's possible.
Regardless, usual caveat: Even if you were using JavaScript, everything on the client can be bypassed, and doesn't mean you don't also need server-side validation.

Yes,
HTML5 has the required attribute for input fields :
<input type="checkbox" name="agree" required /> By clicking this, blablabla
If the user tries to submit the form without checking the box, they will be blocked and have an explicit message thrown by the browser.

The above answer is correct, however, the code provided must be in the context of a form. When the submit element of the form is clicked, the webpage will give an error.
Example Here
Note that the required attribute of an input element is not supported by Apple Safari (according to w3schools)

Related

Cross-Browser: Different behaviors for disabled input fields (the text can/can't be copied)

I have a input html field that is disabled. In some browsers (Chrome, Edge, Internet Explorer and Opera) is possible to select and copy the text but, at least, in Firefox it is not possible.
You can test it by executing the following code in different browsers:
<input type="text" disabled value="is disable">
<input type="text" readonly value="is readonly">
I read in here that disabled fields can be focus, here that A disabled input element is unusable and un-clickable and in here that A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
I didn't find anything saying that the text from disabled inputs can't be copied.
There is standard behavior and some browsers are not respecting it or can the browsers choose if the text from a disabled input can or can't be copied?
And there is a solution for allowing, in all browsers, the text from a disabled input field to be copied?
Note: My application is implemented using Angular/TypeScript languages.
It seams that the only browser that has a distinct behavior is firefox. I opened an issue in here trying to understand if is a design option or if is a bug. I'm waiting now for an answer.
Change your field from disabled to readonly. That is the correct attribute for the behaviour you want.
Don't waste time hacking a javascript solution together as it will be even more flaky than the minor differences in browser behaviour.
If the issue is that you want your readonly fields to look like disabled fields, it's fairly easy to style an input with a readonly attribute set. You don't need to change behaviour to change appearance.
input[readonly] {
background: #EEE;
color: #666;
border: solid 1px #CCC;
}
<input readonly value="I am readonly">
I tried to use user-select in an input but it can't prevent selecting of text to it. Even wrap it to a div with a user-select: none style still not work. It's only work for (I think) non-focusable element like div, span, etc.
However, right now I think user-select: none is the only better option if you want to ensure that user won't copy the text from the page even in many different browsers (check user-select browsers compatibility). So I would suggest, create a component that something like this:
<input *ngIf="!isDisabled" value="model" />
<div *ngIf="isDisabled" style="user-select: none">{{model}}</div>
Caveat: You have to styled the div to be more like a disabled input.
There is nothing wrong with doing this when you disable a form control.
<input type="text" disabled readonly value="is disable">
or
<input type="text" disabled="disabled" readonly="readonly" value="is disable">
However, that may not produce consistent behavior as it pertains to copying text (after selecting it).
An Imperfect JavaScript Way:
I have not used a select type event in a while, but I suggest toggling the ability to select the text. You might also play with the focus and blur events.
External CSS Style Sheet:
.preventSelection {user-select: none} // IE 10+
W3Schools: user-select:
Quick and Dirty Event Handler:
function preventDisabledControlTextCopy(e)
{
// blah, blah, blah
if (e.target.disabled === true) {
// Add "preventSelection" to e.target.className
// Alternatively, change the focus to somewhere else!
} else {
// Remove "preventSelection" from e.target.className
}
}
// Blah, blah, blah-blah blah
textBox.addEventListener("select", preventDisabledControlTextCopy, false);
It is never a waste of time to seek options. I skipped many details, but I made the important part explicit (as Stackoverflow is a tool people use to learn things). Implementation is up to you.
Final Thoughts:
The best answer might be to use CSS and JavaScript and toggle visibility: hidden (IE 4+) or display: none (IE 8+), depending on your scenario, DOM structure, and the complexity you are able to manage.
Dynamic forms are a great way to experience the interplay between HTML, CSS, and JavaScript.

jQuery Validate Non-Visible Fields

I've seen bunches of questions about this, but wanted to clarify my understanding. It all started when I was setting up jQuery validation on a popup form. If I added the validate() method while the form wasn't visible, the validation didn't work (straight submit). If I added validation after the form element was visible, all is well... the validate fires and doesn't submit the form.
So, I tried to isolate this behavior and this is what I ended up with:
https://jsfiddle.net/KyleMit/ph8ue5j5/
Here's the HTML:
<form id="form" style="display: none;">
<input type="text" name="name" id="name" placeholder="Name" required="requited" /><br/>
<input id="submit" class="button" type="submit" value="submit"/>
</form>
Here's the JS:
$(function() {
$('#form').validate({
rules: {
name: {
required: true,
minlength: 2
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name should be more than 2 characters"
}
}
});
window.setTimeout(function() {
$("#form").show()
}, 3000);
});
If you run this, you will see the form is first invisible. Then after 3 seconds, becomes visible. This is the same setup as my popup form.
What surprises me is the validations works! This goes against what I have been reading and what I've witnessed in my web project.
Can anyone explain this?
It depends on which version you're using. As of version 1.9.0, ignore: ":hidden" is the default option, so it doesn't need to be set explicitly. Depending on when you were looking at answers or which version you were using, you might see different answers.
In your example, you're using v1.11.0, so hidden elements should be ignored by default. The :hidden selector includes elements that:
have a display value of none.
are form elements with type="hidden".
have width and height are explicitly set to 0.
have an hidden ancestor, so the element is not shown on the page.
If you want to change that, you need to pass in a different value for ignore in the options object.
The point that seems to be causing confusion is at what point the validation check if an element is hidden. When a form submits, jQuery-Validate will re-check any inputs. It's at that point that elements in your ignore will be chosen or not. So if an element is visible by the time you're hitting submit, it will be validated.
Try running the sample below. If you submit before the first element has a chance to load, you'll only get a single warning, even though both inputs are required, because the first one is excluded because it's hidden. Wait until the script shows the first input and try to submit again, and both elements will be included.
Demo in Stack Snippet
$(function() {
$('#form').validate({
ignore: ':hidden'
});
window.setTimeout(function() {
$('.hidden').show()
}, 4000);
});
.hidden {
display: none;
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>
<form id="form" >
<input type="text" id="hidden" name="hidden" placeholder="Originally Hidden" required="required" class="hidden" /><br/>
<input type="text" id="visible" name="visible" placeholder="Originally Visible" required="required" /><br/>
<input type="submit" id="submit" value="submit"/>
</form>
"This goes against what I have been reading and what I've witnessed in my web project."
Unfortunately, you did not provide an example of this alternative behavior you're describing. We can only see your demo, which is working exactly as designed.
Can anyone explain this?
Not until you show us the broken version.
$('#form').validate({ ....
You can attach the .validate() method to a hidden form and the plugin will be ready to validate this form. As long as the HTML exists when you call .validate(), the plugin is initialized and ready for form validation.
If the form fields are hidden OR if the form fields are inside a hidden container, there will be no validation on these fields. HOWEVER, this will not prevent you from initializing the plugin on the form as described in #1 above. Simply making the fields visible (in this case the whole form) allows them to be validated.
You can optionally validate hidden fields by setting the ignore option to []. However, I don't believe you're asking about how to validate hidden fields.
Quote OP Comment:
What I'm seeing in my project is if the form is hidden when the validate() method is called, and the form becomes visible, it still won't validate. But if I call the validate() method after the form is visible, it works.
The demo you've provided is showing the exact opposite of what you describe.
My demo below is a variation of yours. The .validate() method is attached to a hidden form. Then when you click the button to show the form... validation is already working.
DEMO: https://jsfiddle.net/1v35f7L2/1/
FWIW, make sure you're using the latest version of jQuery and the jQuery Validate plugin. Your demo is using jQuery 1.6, which is several years old and jQuery Validate 1.11, which is also a little old.

Preventing an HTML form field from being submitted

I want to programmatically allow or hide a form field from being submitted in an HTML5 form. I thought I could just set its CSS display attribute to none. However, it still gets submitted (just can't be seen). Is there another property I can set rather than removing the element completely from the HTML5 document?
Simply set disabled attribute for the form field, e.g.
<input name="test" value="test" disabled="disabled">
REF: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1
Set the disabled property to the truth value true. It corresponds to the HTML attribute (“content attribute” in HTML5 parlance) with the same name but takes truth values. For example, assuming
<input name=foo id=foo>
you could set, in JavaScript,
document.getElementById('foo').disabled = true;
This typically changes the appearance of the field, too, by making the background gray.
Setting display: none, or any CSS setting, has no impact on what gets submitted. CSS is for presentation (rendering), not functionality.

How to disable fields within a Javascript form

What is the best way of disabling(greying out) fields within a Javascript form? I have tried the disabled="disabled" on both the form and its fields but neither work e.g.:
<form:form id="testForm" method="post" disabled="disabled" action="${pageContext.request.contextPath}/testSave" commandName="testForm">
<tr>
<td valign="top" disabled="disabled">Name: </td>
<td valign="top"><form:input disabled="disabled" path="fName"/></td>
</tr>
</form:form>
Any ideas on what im doing wrong here?
Using JQuery you could do the following to disable all form fields for a given form:
$('#formId').find('input,select,textarea[,other elements]').prop('disabled', true);
Well, it sort of depends on exactly what you are trying to do.
The "sure fire" way of disabling form fields is a combination of "disabled" and "readonly" on the inputs. Between the two, you can cover everything that you could want:
grey out the input
make the input non-editable
make the input non-focasable
keep the input from being sent with the form
Since some browsers don't support the "greyed out" part of disabling, the best way to cover that is to set up a custom CSS to display disabled (or readonly) fields the way that you want them to show.
To get the right soluiton for what you want to do with your form, look here for the differences between the two attributes: http://kreotekdev.wordpress.com/2007/11/08/disabled-vs-readonly-form-fields/
Edit: Additionally, you might consider replacing the disabled inputs with text, if the data is not to be sent with the form . . . less confusing to the user than having an input field that they can't use.
See the below js sample; I hope my perception matches with your wish:
http://jsbin.com/avopuf/3/
Change css as per your requirement.
You can disable input tags, but not td
td tag attributes
Sounds like you can use a reference site to brush up on HTML. I find W3School to be a good starting point, it has tutorials and references for a variety of online technologies.
Specifically for HTML and HTML input tag
Also, how is it not working? (Is it not greying out, or user can still type in it, ...?)

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?
You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.
The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

Categories