如果提交时未选择单选选项，则添加类

Question

我正在尝试添加一些类到我的表单上提交，这表明哪些必需的字段还没有被解决。

我有这个工作的input[type="text"]，但它不工作的无线电选项。在检查代码时，它甚至没有将error类添加到radio元素?

演示:

(function ($) {
$('#rsvp form input[type=submit]').click(function(e){
console.log("click");
var data = $('#rsvp form').serialize();
[].slice.call($('#rsvp form input.required')).forEach(function (elem, index) {
$elem = $(elem);
console.log(elem);
if($elem.val().length == 0){
$elem.addClass("error");
} else{
$elem.removeClass("error");
}
});

});
}) (jQuery);

.error{
background: red;
}
.error.input-label:before{
border-color: red;
}
:root {
--green: #9A9E90;
--black: #000000;
}
fieldset{
margin-bottom: 50px;
}
form{
position: relative;
}
input {
width: 100%;
box-sizing: border-box;
background: none;
outline: none;
resize: none;
border: 0;
border-bottom: 2px solid var(--green);
border-left: 2px solid var(--green);
}
input[type=checkbox], input[type=radio] {
position: absolute;
opacity: 0;
}
input[type=submit] {
cursor: pointer;
display: inline-block;
width: fit-content;
color: var(--black);
border: 2px solid var(--green);
padding: 20px 30px;
text-transform: uppercase;
}
.input-label {
display: inline-block;
position: relative;
margin-right: 30px;
padding-left: 25px;
cursor: pointer;
}
.input-label:before, .input-label:after {
content: "";
position: absolute;
top: 50%;
transform: translate(0px, -50%);
left: 0;
}
.input-label:before {
display: block;
width: 15px;
height: 15px;
border: 2px solid var(--green);
}
.input-label:after {
display: none;
width: 9px;
height: 9px;
margin: 3px;
background-color: var(--green);
transform: translate(0px, -82%);
}
input:focus + .input-label:before {
border-color: var(--green);
}
input:checked + .input-label:after {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="rsvp">
<form>
<fieldset>
<span>Attending?</span>
<input class="required" id="attending-yes" type="radio" name="attendance" value="yes" required />
<label class="input-label" for="attending-yes">Yes</label>
<input class="required" id="attending-no" type="radio" name="attendance" value="no" required />
<label class="input-label" for="attending-no">No</label>
</fieldset>

<fieldset>
<input class="required" type="text" name="full_name" placeholder="Your full name*" required />
</fieldset>

<input type="submit" name="submit" value="Send" />
</form>
</div>

Answer 1

您可以这样做来检查组的复选框是否被选中。

if($elem.val().length == 0){
$elem.addClass("error");
} else if ($elem.is(":radio")) {
var group = $("input[name='"+$elem.attr("name")+"']:checked");
$elem.parent().toggleClass("error",group.length == 0 )
} else {
$elem.removeClass("error");
}

(function ($) {
$('#rsvp form input[type=submit]').click(function(e){
var data = $('#rsvp form').serialize();
[].slice.call($('#rsvp form input.required')).forEach(function (elem, index) {
$elem = $(elem);
if($elem.val().length == 0){
$elem.addClass("error");
} else if ($elem.is(":radio")) {
var group = $("input[name='"+$elem.attr("name")+"']:checked");
$elem.parent().toggleClass("error",group.length == 0 )
} else {
$elem.removeClass("error");
}
});

});
}) (jQuery);

.error{
background: red;
}
.error.input-label:before{
border-color: red;
}
:root {
--green: #9A9E90;
--black: #000000;
}
fieldset{
margin-bottom: 50px;
}
form{
position: relative;
}
input {
width: 100%;
box-sizing: border-box;
background: none;
outline: none;
resize: none;
border: 0;
border-bottom: 2px solid var(--green);
border-left: 2px solid var(--green);
}
input[type=checkbox], input[type=radio] {
position: absolute;
opacity: 0;
}
input[type=submit] {
cursor: pointer;
display: inline-block;
width: fit-content;
color: var(--black);
border: 2px solid var(--green);
padding: 20px 30px;
text-transform: uppercase;
}
.input-label {
display: inline-block;
position: relative;
margin-right: 30px;
padding-left: 25px;
cursor: pointer;
}
.input-label:before, .input-label:after {
content: "";
position: absolute;
top: 50%;
transform: translate(0px, -50%);
left: 0;
}
.input-label:before {
display: block;
width: 15px;
height: 15px;
border: 2px solid var(--green);
}
.input-label:after {
display: none;
width: 9px;
height: 9px;
margin: 3px;
background-color: var(--green);
transform: translate(0px, -82%);
}
input:focus + .input-label:before {
border-color: var(--green);
}
input:checked + .input-label:after {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="rsvp">
<form>
<fieldset>
<span>Attending?</span>
<input class="required" id="attending-yes" type="radio" name="attendance" value="yes" required />
<label class="input-label" for="attending-yes">Yes</label>
<input class="required" id="attending-no" type="radio" name="attendance" value="no" required />
<label class="input-label" for="attending-no">No</label>
</fieldset>

<fieldset>
<input class="required" type="text" name="full_name" placeholder="Your full name*" required />
</fieldset>

<input type="submit" name="submit" value="Send" />
</form>
</div>

Answer 2

你应该为"提交"设置一个id/class按钮，并在脚本中添加click函数，为未选中的单选按钮/按钮添加类名。

$("#rsvp").delegate("#submitButton", "click", function(){
$('input:radio').each(function () {    
if($(this).not(':checked')){ 
$(this).addClass("unSelectedRadioButton");
}
});  
});

.error{
background: red;
}
.error.input-label:before{
border-color: red;
}
:root {
--green: #9A9E90;
--black: #000000;
}
fieldset{
margin-bottom: 50px;
}
form{
position: relative;
}
input {
width: 100%;
box-sizing: border-box;
background: none;
outline: none;
resize: none;
border: 0;
border-bottom: 2px solid var(--green);
border-left: 2px solid var(--green);
}
input[type=checkbox], input[type=radio] {
position: absolute;
opacity: 0;
}
input[type=submit] {
cursor: pointer;
display: inline-block;
width: fit-content;
color: var(--black);
border: 2px solid var(--green);
padding: 20px 30px;
text-transform: uppercase;
}
.input-label {
display: inline-block;
position: relative;
margin-right: 30px;
padding-left: 25px;
cursor: pointer;
}
.input-label:before, .input-label:after {
content: "";
position: absolute;
top: 50%;
transform: translate(0px, -50%);
left: 0;
}
.input-label:before {
display: block;
width: 15px;
height: 15px;
border: 2px solid var(--green);
}
.input-label:after {
display: none;
width: 9px;
height: 9px;
margin: 3px;
background-color: var(--green);
transform: translate(0px, -82%);
}
input:focus + .input-label:before {
border-color: var(--green);
}
input:checked + .input-label:after {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="rsvp">
<form>
<fieldset>
<span>Attending?</span>
<input class="required" id="attending-yes" type="radio" name="attendance" value="yes" required />
<label class="input-label" for="attending-yes">Yes</label>
<input class="required" id="attending-no" type="radio" name="attendance" value="no" required />
<label class="input-label" for="attending-no">No</label>
</fieldset>

<fieldset>
<input class="required" type="text" name="full_name" placeholder="Your full name*" required />
</fieldset>

<input type="submit" id="submitButton" name="submit" value="Send" />
</form>
</div>

希望这有帮助!!