checkbox/select about validity HOT 12 CLOSED

Hi, mauriciocgpereira,

I failed to get it into the documentation, but you can use the checkboxChecked() validator.

$("#the-checkbox").checkboxChecked();

from validity.

Thanks,
But two things more:

• in the ckeckbox it doesn't apply the ".validity-erroneous" style if the checkbox isn't checked, how can I do this?
• in the case of the select field I have a default value selected (that is disabled) but I want to make the visitor select a different value, how can I do this?
  Thanks in advance

from validity.

• The .validity-erroneous class is only applied when you're using the "summary" output mode. Is this the mode you're using?
• To do this, you can set the value attribute of your default option to be the empty string, like <option selected="selected" value="">Default</option>. Then just use the require validator on it. $("#my-select").require();

from validity.

Hi,
Yes it's the summary mode, the problem is that it appears the message in the summary, but the css (inthis case the broder color) doesn't change.
The same with the select field.

here is the code:

$("form").validity(function() {
$("#fullname")
.require("O Nome é obrigatório.")
.minLength(12, "O Nome deverá ser mais detalhado.");
$("#email")
.require("O Email é obrigatório.")
.match("email", "Deverá indicar um email válido.");
$("#assunto") //the select field
.require();
$("#confirmacao") //the checkbox that must be checked to submit the form
.checkboxChecked("Por favor confirme que pretende enviar este email");

});

$.validity.setup({
// You may change the output mode with this property.
outputMode: "summary",

// The this property is set to true, validity will scroll the browser viewport
// so that the first error is visible when validation fails.
scrollTo: false,

// If this setting is true, modal errors will disappear when they are clicked on.
modalErrorsClickable: true,

// If a field name cannot be otherwise inferred, this will be used.
defaultFieldName: "This field"

});

from validity.

Ah, I understand. It seems to work for me with the select, but CSS usually can't be used to style checkboxes.

For reference, I used this page http://validity.thatscaptaintoyou.com/livetest/

In Form Code I put

<input id="fullname"/>
<br/>
<input id="email"/>
<br/>
<select id="assunto">
<option selected="selected" value="">Default</option>
<option value="x">X</option>
</select>
<br/>
<input type="checkbox" id="confirmacao">
<br/>


<div class="validity-summary-container">
    Error summary:
    <ul></ul>
</div>

And in Validation code:

$.validity.setup({outputMode:"summary",
scrollTo: false,
modalErrorsClickable: true,
defaultFieldName: "This field"
});

$("#fullname")
  .require("O Nome é obrigatório.")
  .minLength(12, "O Nome deverá ser mais detalhado.");
$("#email")
  .require("O Email é obrigatório.")
  .match("email", "Deverá indicar um email válido.");
$("#assunto") //the select field
  .require();
$("#confirmacao")
  .checkboxChecked("Por favor confirme que pretende enviar este email");

The select changes color when it is invalid. I'm not sure what to do about the checkbox. You usually can't change the border of a checkbox across all browser. Maybe the validation message for the checkbox could clearly state which one it refers to.

from validity.

I've made it.
It is curious that if I use:
<option selected="selected"></option>
it works, but if I use one of the followings:
<option selected="selected" disabled></option>
or
<option selected="selected" disabled>Assunto</option>
or
<option selected="selected">Assunto</option>
it no longer works!

from validity.

In what concernes the checkbox I'm styling it with css, giving it a border with 2 px and color!
I don't understand why I can't apply it the erroneous style!

from validity.

In most browsers, you can't change the border of a checkbox.

from validity.

How is it supposed to work/is it supposed to work with 2 different checkboxes?

I have:

<input class="checked" type="checkbox" name="one" id="one" title="one" value="1" />
<input class="checked" type="checkbox" name="two" id="two" title="two" value="1" />

And:

 $('.checked').checkboxChecked();

It seems to check only if either one of them is checked, so if i check "one" or "two" (but not both), Validity thinks its fine, even tho they have different id and name.

Im supposed to do a form with 2 agreement checkboxes but now it seems im unable to make it work.

With ".require()" it didnt work at all.

from validity.

That appears to be a bug!

Until I've fixed it, you could wrap it in an each, as in

$(".checked").each(function() { $(this).checkboxChecked(); });

Here's an example.

from validity.

Thanks a lot, for answering so soon and for providing a workaround 👍

from validity.

Fixed in 1.3.4!

from validity.