Fatal编程技术网
  • jquery/
  • jQuery—在填充所有第一个字段（输入、收音机、选择、文本区域）后，将类添加到下一个部分

jQuery—在填充所有第一个字段（输入、收音机、选择、文本区域）后，将类添加到下一个部分

jquery forms

jQuery—在填充所有第一个字段（输入、收音机、选择、文本区域）后，将类添加到下一个部分,jquery,forms,Jquery,Forms,我做了一个多步骤的表格 当第一部分中的所有字段都已填充时，我想将class=“active”添加到第二部分。同样，当第一个和第二个字段都被填充时，我将激活第三部分。（不是手风琴，而是保留显示的第一部分。） 我将通过css激活下一个要显示/隐藏的部分 我试图找到最好的例子来应用，但我还没有找到最好的 我不擅长jQuery和javascript，尽管我可以构建HTML和CSS 第1节 城市： 运输： 选择一个值 汽车 巴斯 训练 付款 对 不 信息： 第2节 动物： 选择一个值 狮子 重播 可食

我做了一个多步骤的表格

当第一部分中的所有字段都已填充时，我想将
class=“active”
添加到第二部分
。同样，当第一个和第二个字段都被填充时，我将激活第三部分。（不是手风琴，而是保留显示的第一部分。） 我将通过css激活下一个要显示/隐藏的部分

我试图找到最好的例子来应用，但我还没有找到最好的

我不擅长jQuery和javascript，尽管我可以构建HTML和CSS


第1节
城市：
运输：
选择一个值
汽车
巴斯
训练
付款
对
不
信息：
第2节
动物：
选择一个值
狮子
重播
可食用的
对
不
第3节
姓名：
电邮：
你没事吧？
选择一个值
对
不
什么时候
白天
夜
随时

我同意这些条款。

提交
我正在验证文本区域外焦点上的所有字段，并为第二节进行验证。同样，您也可以为第三节进行验证

<html>
    <head>
        <style>
        form {
  width: 600px;
  margin: 30px auto;
  padding: 30px;
  border: 8px solid orange;
}
section {
  background: #ddd;
  padding: 20px;
  margin: 10px 0;
}
.field-container {
  margin-bottom: 20px;
}
.section {
  opacity: 0.25;
  overflow: hidden;
  height: 50px;
}
.section.active {
  opacity: 1;
  height: auto;
}
.section.submit {
  background: orange;
  height: auto;
  padding: 20px;
  text-align: center;
}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $("#description").on('blur', function(e) {
            var fname= $("#fullname").val();
            var trans= $("#trans").val();
            var desc=$("#description").val();
            if(fname=="" || trans=="" || desc=="" || !$("input:radio[name='testRadio']").is(":checked")){

            }else{
                $('#TWO').css('opacity', '1.25'); 
            }
            });
            });
        </script>
    </head>
<form>
    <section id="ONE" class="section one active">
        <h2>Secion 1</h2>
        <div class="field-container">
            City: <input type="text" class="required" placeholder="Full Name" required id="fullname"/>
        </div>
        <div class="field-container">
            Transport:
            <select class="required" required id="trans">
                <option value="" selected disabled>selected a value</option>
                <option>Car</option>
                <option>Buss</option>
                <option>Train</option>
            </select>
        </div>
        <div class="field-container">
            Payment?
            <input type="radio" id="yes" name="testRadio" class="required" required /> Yes
            <input type="radio" id="no" name="testRadio" class="required" /> No
        </div>
        <div class="field-container">
            Message:
            <textarea name="description" id="description" class="required"></textarea>
        </div>

    </section>
    <section id="TWO" class="section two">
        <h2>Secion 2</h2>
        <div class="field-container">
            Animal:
            <select class="required" required>
                <option value="" selected disabled>selected a value</option>
                <option>Lion</option>
                <option>Rebbit</option>
            </select>
        </div>
        <div class="field-container">
            Edible?
            <input type="radio" id="yes" name="testRadio" class="required" required /> Yes
            <input type="radio" id="no" name="testRadio" class="required" /> No
        </div>
    </section>
    <section id="THREE" class="section three">
        <h2>Secion 3</h2>
        <div class="field-container">
            Name: <input type="text" class="required" placeholder="Name" required />
        </div>
        <div class="field-container">
            Email: <input type="text" class="required" placeholder="Email" required />
        </div>
        <div class="field-container">
            Are you okay?
            <select class="required" required>
                <option value="" selected disabled>selected a value</option>
                <option>Yes</option>
                <option>No</option>
            </select>
        </div>
        <div class="field-container">
            When?
            <input type="checkbox" name="when1" value="Day"> Day
            <input type="checkbox" name="when2" value="Car"> Night
            <input type="checkbox" name="when3" value="Any"> Anytime<br>
        </div>
        <div class="field-container">
            <input type="checkbox" name="consent" value="human" class="required"> I agree to the terms.<br>
        </div>
    </section>

    <section id="SUBMIT" class="section submit">
        <button type="button">Submit</button>
    </section>
</form>
</html>


形式{
宽度：600px；
保证金：30像素自动；
填充：30px；
边框：8px实心橙色；
}
部分{
背景：ddd；
填充：20px；
利润率：10px0；
}
.现场容器{
边缘底部：20px；
}
.科{
不透明度：0.25；
溢出：隐藏；
高度：50px；
}
.section.active{
不透明度：1；
高度：自动；
}
.section.submit{
背景：橙色；
高度：自动；
填充：20px；
文本对齐：居中；
}
$（文档）.ready（函数（）{
$（“#说明”）。关于（'blur'，函数（e）{
var fname=$（“#全名”）.val（）；
var trans=$（“#trans”）.val（）；
var desc=$（“#说明”）.val（）；
如果（fname==“”| | trans==“”| | desc==“”| |！$（“输入：radio[name='testRadio']”）是（“：选中”））{
}否则{
$（'#TWO'）.css（'opacity'，'1.25'）；
}
});
});
第1节
城市：
运输：
选择一个值
汽车
巴斯
训练
付款
对
不
信息：
第2节
动物：
选择一个值
狮子
重播
可食用的
对
不
第3节
姓名：
电邮：
你没事吧？
选择一个值
对
不
什么时候
白天
夜
随时

我同意这些条款。

提交
您可以使用（'blur'）事件中的
.on（'blur'）
检查是否所有字段都已填充。当用户从输入和文本区域中删除值时，是否有任何方法删除样式？一旦更改输入字段写入。1） $（“#fieldId”）.removeAttr（“样式”）；要删除完整的css 2）特定样式$（“#fieldId”）.attr（“要更改的属性”、“要指定给属性的值”）； 
<html>
    <head>
        <style>
        form {
  width: 600px;
  margin: 30px auto;
  padding: 30px;
  border: 8px solid orange;
}
section {
  background: #ddd;
  padding: 20px;
  margin: 10px 0;
}
.field-container {
  margin-bottom: 20px;
}
.section {
  opacity: 0.25;
  overflow: hidden;
  height: 50px;
}
.section.active {
  opacity: 1;
  height: auto;
}
.section.submit {
  background: orange;
  height: auto;
  padding: 20px;
  text-align: center;
}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $("#description").on('blur', function(e) {
            var fname= $("#fullname").val();
            var trans= $("#trans").val();
            var desc=$("#description").val();
            if(fname=="" || trans=="" || desc=="" || !$("input:radio[name='testRadio']").is(":checked")){

            }else{
                $('#TWO').css('opacity', '1.25'); 
            }
            });
            });
        </script>
    </head>
<form>
    <section id="ONE" class="section one active">
        <h2>Secion 1</h2>
        <div class="field-container">
            City: <input type="text" class="required" placeholder="Full Name" required id="fullname"/>
        </div>
        <div class="field-container">
            Transport:
            <select class="required" required id="trans">
                <option value="" selected disabled>selected a value</option>
                <option>Car</option>
                <option>Buss</option>
                <option>Train</option>
            </select>
        </div>
        <div class="field-container">
            Payment?
            <input type="radio" id="yes" name="testRadio" class="required" required /> Yes
            <input type="radio" id="no" name="testRadio" class="required" /> No
        </div>
        <div class="field-container">
            Message:
            <textarea name="description" id="description" class="required"></textarea>
        </div>

    </section>
    <section id="TWO" class="section two">
        <h2>Secion 2</h2>
        <div class="field-container">
            Animal:
            <select class="required" required>
                <option value="" selected disabled>selected a value</option>
                <option>Lion</option>
                <option>Rebbit</option>
            </select>
        </div>
        <div class="field-container">
            Edible?
            <input type="radio" id="yes" name="testRadio" class="required" required /> Yes
            <input type="radio" id="no" name="testRadio" class="required" /> No
        </div>
    </section>
    <section id="THREE" class="section three">
        <h2>Secion 3</h2>
        <div class="field-container">
            Name: <input type="text" class="required" placeholder="Name" required />
        </div>
        <div class="field-container">
            Email: <input type="text" class="required" placeholder="Email" required />
        </div>
        <div class="field-container">
            Are you okay?
            <select class="required" required>
                <option value="" selected disabled>selected a value</option>
                <option>Yes</option>
                <option>No</option>
            </select>
        </div>
        <div class="field-container">
            When?
            <input type="checkbox" name="when1" value="Day"> Day
            <input type="checkbox" name="when2" value="Car"> Night
            <input type="checkbox" name="when3" value="Any"> Anytime<br>
        </div>
        <div class="field-container">
            <input type="checkbox" name="consent" value="human" class="required"> I agree to the terms.<br>
        </div>
    </section>

    <section id="SUBMIT" class="section submit">
        <button type="button">Submit</button>
    </section>
</form>
</html>