jQuery：检查每个可见文本框的值

时间：2017-04-07 18:36:57

标签： javascript jquery html

好的，所以找到这个问题的好标题可能比问题本身更难。

我在发布到数据库时的页面上创建了一个错误处理程序。它会检查输入框是否为空，并且不会运行将发布表单的AJAX代码，而是表示错误。看起来像这样。

$(document).ready(function () {
    $(".AddBtn").click(function () {
        if ($("input[name=Kg]").val() != "" &&
            $("input[name=Sett]").val() != "" &&
            $("input[name=Rep]").val() != "" &&
            $("input[name=Date]").val() != "")
        {
            mySubmit($(this)) // Calls AJAX function and posts.
        }
        else
        {
            $("#errorFieldReqMsg").fadeIn('slow');
                setTimeout(function () { $("#errorFieldReqMsg").fadeOut('slow'); }, 2000);
        }
    });
});

因此，此代码会检查我的4个输入框，但是，在特定的单选按钮上，会出现另外一个输入框，以及我是否想知道是否有一个简洁的解决方案来检查第五个输入当点击该无线电时。

请检查此fiddle以更好地了解我的意思，我引用了使输入框Secondary出现的单选按钮Daily Max。

该特定无线电的代码如下：

<div class="exerciseTypeDiv">
    <input type="radio" name="Type" id="typ4" value="4" class="radioSelectLeft">
    <label class="radioLabel" for="typ4">Primary</label>
    <input type="radio" name="Type" id="typ5" value="5" class="radioSelect" />
    <label class="radioLabel" for="typ5">Secondary</label>
    <input type="radio" name="Type" id="typ6" value="6" class="radioSelect" />
    <label class="radioLabel" for="typ6">Assistance</label>
</div>

＆＃13;
＆＃13; 
$(function() {
            $("input[type='radio']").change(function() {
                if ($(this).val() == 1  && this.checked) {
                    $("#exerVariNameS").show();
                    $("#exerVariNameB").hide();
                    $("#exerVariNameD").hide();
                    $("#exerVariNameA").hide();
                } else if ($(this).val() == 2  && this.checked){
                    $("#exerVariNameS").hide();
                    $("#exerVariNameB").show();
                    $("#exerVariNameD").hide();
                    $("#exerVariNameA").hide();
                } else if ($(this).val() == 3  && this.checked) {
                    $("#exerVariNameS").hide();
                    $("#exerVariNameB").hide();
                    $("#exerVariNameD").show();
                    $("#exerVariNameA").hide();
                }
            });

            $("input[name='Type']").click(function(){
            		var value=$(this).val();
                switch(value){
                	case '4':
                  	$("input[name='Exercise']").each(function(){
                    	$(this).closest('div').show();
                    });
                    $('#dropdown').hide();
                    $('#exerVariNameA').hide();
                    $("#dailyPR").hide();
                    $(".movementTypeDiv").show();
                    break;
                    case '5':
                        $("input[name='Exercise']").each(function(){
                          $(this).closest('div').show();
                        });
                        $('#dropdown').show();
                        $('#exerVariNameA').hide();
                        $("#dailyPR").show();
                        $(".movementTypeDiv").show();
                    break;
                  case '6':
                    $("input[name='Exercise']").each(function(){
                      $(this).closest('div').hide();
                    });
                    $('#dropdown').hide();
                    $('#exerVariNameA').show();
                    $("#dailyPR").hide();
                    $(".movementTypeDiv").hide();
                    break;
                }
            });
            //Remember which radiobutton was last clicked and keeps it that way
            //after a page refresh or form post.
            $('input[type=radio]').each(function() {
                var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );
                if (state) this.checked = state.checked;
                $(this).trigger('change');
            });
            $("input[name='Type']").each(function(){
            	var state=JSON.parse(localStorage.getItem('radio_val'+this.value));
              if(state) this.checked=state.checked;
              $(this).trigger('change');
            });
            $(window).bind('unload', function() {
                $('input[type=radio]').each(function() {
                    localStorage.setItem('radio_' + this.id, JSON.stringify({checked: this.checked}));
                });
                $("input[name='Type']").each(function(){
                	localStorage.setItem('radio_val'+this.value,JSON.stringify({checked:this.checked}));
                });
            });
        });
        
        $(document).ready(function() {
	        $('input[type=radio]').each(function() {
  	            radio_val = JSON.parse(localStorage.getItem('radio_'+this.id));
                if (radio_val.checked) {
                    $(this).trigger('click');
                }
            });
        });
＆＃13; 
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0; 
}

body {
    background-color: white;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


a {
    text-decoration: none;
    color: black;
}

.validation-summary-errors {
    font-weight:bold; 
    color:red; 
    font-size: 11pt;
}

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/*Viewworkout page*/
.squatColor {
    color: #8c479a;
    font-weight: bold;
}

.benchColor {
    color: #2482c5;
    font-weight: bold;
}

.deadliftColor {
    color: #f96716;
    font-weight: bold;
    
}

.blackColor {
    color: #000;
    font-weight: bold;
}

.whiteColor {
    color: #fff;
    font-weight: bold;
}

.showDate {
    text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
}

.capitalFirst {
    text-transform: capitalize;
}

.metricDateTextbox {
    width: 150px;
    padding: 11px;
    font-size: 16px;
    border: 1px solid white;
    color: transparent;
    text-shadow: 0 0 0 black;    
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    vertical-align: middle;
    box-sizing:border-box;
}

.viewWorkoutDateBox {
    width: 150px;
    padding: 11px;
    font-size: 16px;
    border: 1px solid white;
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    vertical-align: middle;
    box-sizing:border-box;
}

::-webkit-input-placeholder {
    color: grey;
    font-weight: 500;
    font-family: Verdana;
}
/*Day, week, month dropdown selector.*/
.dwmViewSelect, .baseliftSelect, .exerVariNameSelect {
    height: 43px;
    font-weight: bold;
    border: 1px solid white;
    margin: auto;
    vertical-align: middle;
    cursor: pointer;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    -webkit-appearance:none;
    padding-left: 10px;
    padding-right: 28px;
    box-sizing: border-box;
    font-size: 14px;
}

/*Submit button for metrics to show charts.*/
.showDateBtn {
    width: auto;
    padding: 10px;
    text-align: center;
    height: 43px;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    border: 1px solid white;
    color: black;
    font-weight: 600;
}

.showDateBtn:focus {
    outline: none;
    border: 1px solid white;
}

.baseliftSelect:focus, .dwmViewSelect:focus {
    outline: none;
    border: 1px solid white;
}

/*Reportion period title text*/
.RPtxt {
    vertical-align: middle;
    margin-right: 5px;
}

.RPtxtTo {
    margin: 0px 5px 0px 5px;
}

.metricsTitle {
    font-weight: 600;
    text-transform: uppercase;
    font-family: Tahoma;
}

#chart_div {
    width: 100%;
    height: 500px;
    border-bottom: 5px solid #898989;
    
}

.repPieChart {
    width: 100%;
    height: 500px;
    border-bottom: 5px solid #898989;
}

.topmargin {
    margin-top: 15px;
}

/*Div to hold the displayed charts coming from ajax calls*/
#here {
    margin-top: 3px;
}

.testthis {
    border: none;
    width: 100px;
    height: 33px;
    vertical-align: middle;
    text-align:center;
    color: transparent;
    text-shadow: 0 0 0 black; 
    cursor:pointer;
    user-select: none;
}

input:hover::-webkit-input-placeholder {
    color: red;
}
input:focus::-webkit-input-placeholder {
    color: red;
}


.holdMetricLinks {
    display: inline-block;
    width: 33%;
    height: 180px;
    line-height: 180px; /* needs to be same as height. */
    background-color: white;
    text-align:center;
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 5px solid #898989;
}

.holdMetricLinkboxes {
    width: 100%;
    text-align:center; /* centers the divs inside this div. */
}

.holdLiftMenu {
    margin-top: 10px;
    background-color: white;
    padding: 10px;
}

.holdLiftMenuUL, .holdTimeMenuUL {
    margin:0;
}

.holdTimeMenuUL {
    float:right;
    position:relative;
    right: 5px;
    top: -24px;
}

.holdLiftMenuLI, .holdTimeMenuLI {
    display:inline-block;
}

.holdLiftMenuA, .holdTimeMenuA {
    background-color:white;
    padding: 10px;
    cursor:pointer;
    color: black;
    font-weight:700;
    font-size: 18px;
    text-align:center;  
    white-space: nowrap;  
}
.current {
    border-bottom: 3px solid red;
}
.holdLiftMenuA:hover {
    border-bottom: 3px solid red;
}
.holdTimeMenuA:hover {
    border-bottom: 3px solid red;
}

.hideThis {
    display: none;
}
/*Insert workout click button (submit ajax), on .insertWorkout.*/
.AddBtn {
    padding: 17px 20px 17px 20px;
    cursor:pointer;
    width:100%;
    display: block;
    box-sizing:border-box;
    margin: 0px;
    text-align: center;
    font-size: 25px;
    font-weight: bolder;
    text-transform:uppercase;
    background-color: #6ebf4a;
    color: white;
}

.AddBtn:hover {
    background-color: #404040;
}

/* A div with a message shown on ajax call success. */
#successMsg {
    position:fixed;
    top: 25%;
    padding: 15px;
    width: 200px;
    text-align: center;
    left: 41.5%;
    border-radius: 40px;
    font-size: 25px;
    font-weight: bolder;
    background-color: #6ebf4a;
    color: white;
    text-transform:uppercase;
    display: none;
}

/* A div with a message shown on ajax call failure/error. */
#errorMsg {
    position:fixed;
    top: 25%;
    padding: 15px;
    width: 200px;
    text-align: center;
    left: 41.5%;
    border-radius: 40px;
    font-size: 25px;
    font-weight: bolder;
    background-color: #ff4343;
    color: white;
    text-transform:uppercase;
    display: none;
}

#errorFieldReqMsg {
    position:fixed;
    top: 25%;
    padding: 15px;
    width: 300px;
    text-align: center;
    left: 38%;
    border-radius: 40px;
    font-size: 25px;
    font-weight: bolder;
    background-color: #ff4343;
    color: white;
    text-transform:uppercase;
    display: none;
}

.centerthis {
    margin:auto;
    background-color: grey;
}

.alignCenterThis {
    text-align:center;
}

/*Radios on insertWorkout*/
.radioSelect {
    width: 20px;
    vertical-align: middle;
    height: 20px;
    margin: 0px 3px 0px 15px;
    cursor:pointer;
}

.radioSelectLeft {
    width: 20px;
    vertical-align: middle;
    height: 20px;
    margin: 0px 3px 0px 0px;
    cursor:pointer;
}

/*Labels in insertWorkout*/
.radioLabel {
     font-weight: bold;
     vertical-align:sub;
     font-size: 18px;
     cursor: pointer;
}
/*univeral use*/
.inlineBlock {
    display:inline-block;
}

/*Holds all content to center it on insertWorkout page.*/
.insertWorkoutFormHolder {
    width: 500px;
    margin:auto;
}
/*holds 3 radios and labels on insertWorkout*/
.exerciseTypeDiv, .movementTypeDiv {
    background-color: white;
    padding: 30px 15px 30px 10px;
    border-bottom: 3px solid #898989;
}

/*********************** View Workout page. ****************************/

.vwForm {
    /*margin-bottom: 10px;*/
}

.vwHoldDateStuff {
    width:100%;
    background-color: #6fbf4a;
    padding:20px;
    box-sizing:border-box;
    margin-bottom: 10px;
}

.vwHoldLiftInfo {
   
}

.vwLiftVariTDiv {
    padding: 20px;
    font-size: 20px;
    margin-bottom: 7px;
    cursor: pointer;
    background: #000 center left 20px no-repeat url('Images/minusicon.png'); 
    background-size: 30px 30px;
}

.plusSign {
    background: #000 center left 20px no-repeat url('Images/plusicon.png'); 
    background-size: 30px 30px;
}

.minusSign {
    
}

.liftVariTitle {
    margin-left: 40px;
}

.vwSetRepHolder {
    display: none;
    padding: 5px 20px 5px 20px;
    margin: -3px 0px 7px 10px;
    border: 1px solid #ebebeb;
    background-color: white;
}

.vwVolumeTable {
    width: 100%;
    margin: 0px;
    box-sizing:border-box;
}

.vwVolumeTTD {
    padding: 15px 5px 15px 20px;
    width: 30px;
    margin: 0px;
}

.vwVolumeTTDfirst {
    padding: 15px 5px 15px 0px;
    width: 30px;
    margin: 0px;
}

.vwVolumeTTDspecial {
    margin: 0px;
    padding: 0px;
    width: 20px
}

.vwVolumeTTDverySpecial {
    width: 50px;
    padding-right: 10px;
}

.worksmaybe {
    border-top: 1px solid #ebebeb; 
    width: 100%;
}

.vwSpaceThing {
    height: 10px;
    background-color: red;
    width: 100%;
}

.vwCategoryHolder {
    border: 1px solid #e4e5e6;
    border-bottom: 4px solid #e4e5e6;
    background-color: white;
    padding: 10px;
    width: 300px;
    display: table-cell;
    margin-bottom: 15px;
}

.vwCategoryHolderHeader {
    border-bottom: 1px solid #e4e5e6;
    background-color: white;
    padding-bottom: 0px;
}

.vwCatergoryTitle {
    margin: 15px 0 25px 0;
    padding: 0;
}

.vwVerticalSpace {
    display: table-cell;
    width: 5px;
    background-color: #f5f5f5;
}

.vwBigCatHold {
    display: table-row;
}

.HUGE {
    display: table;
    width: 100%;
}

.vwPeakTable {
    width: 100%;
}

.vwFirstTD {
    cursor: context-menu;
}

.vwLastTD {
    width: 50px;
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    border-left: 10px solid white;
    text-align:center;
    color: white;
    cursor: context-menu;
    padding: 10px 20px 10px 20px;
    font-weight: bold;
    font-size: 18px;
}

.tableLine {
    padding: 0;
    height: 1px;
    background-color: #e4e5e6;
}

.tableSpace {
    padding: 0;
    height: 5px;
}

.BGSquatColor {
    background-color: #8c479a;
}

.BGBenchColor {
    background-color: #2482c5;
} 

.BGDeadliftColor {
    background-color: #f96716;
}

.BGBlackColor {
    background-color: black;
}

.BGAssistanceColor {
    background-color: #9b9b9b;
}
    
#piechartt {
    margin-top: 5px;
    width: 300px;
}

/****************************************************/
/*************** Personal record page ***************/
/****************************************************/

.prTableCell {
    padding: 10px;
    border:1px solid red;
    width: 80px;
    text-align:center;
}

.prExerVariNameTD {
    width: 130px;
}




/*********************************************/
.workoutVariSelect {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.insertWorkoutBoxes, .loginBoxes {
    border: 1px solid white;
    width: 100%;
    padding: 20px 11px 20px 11px;
    font-size: 18px;
    box-sizing:border-box;
    margin: 0px 0px 3px 0px;
}

.loginBoxes {
    border: 1px solid #efefef;
}

.squat {
    color: #8c479a;
}

.benchpress {
    color: #2482c5;
}

.deadlift {
    color: #f96716;
}



.fSize18 {
    font-size: 18px;
}
.fSize16 {
    font-size: 16px;
}
.fSize14 {
    font-size: 14px;
}
.fSize12 {
    font-size: 12px;
}

   

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
    background-color: #f5f5f5;
}

#body {
    background-color: #f5f5f5;
    clear: both;
    padding-bottom: 35px;
    /*width: 1000px;*/
    width: 80%;
    margin: auto;
    padding: 20px;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

/*header .content-wrapper {
    padding-top: 20px; 
}*/

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centerthis">
        
        <form method="post" action="~/AJAXcalls/InsWrkOAJAX.cshtml">
            <div class="insertWorkoutFormHolder">
                <div class="exerciseTypeDiv">
                    <input type="radio" name="Type" id="typ4" value="4" class="radioSelectLeft">
                    <label class="radioLabel" for="typ4">Primary</label>
                    <input type="radio" name="Type" id="typ5" value="5" class="radioSelect" />
                    <label class="radioLabel" for="typ5">Secondary</label>
                    <input type="radio" name="Type" id="typ6" value="6" class="radioSelect" />
                    <label class="radioLabel" for="typ6">Assistance</label>
                </div>

                <div class="movementTypeDiv hideThis">
                    <div class="hideThis inlineBlock">
                        <input class="radioSelectLeft" type="radio" name="Exercise" id="hej1" value="1" />
                        <label class="radioLabel squat" for="hej1">Squat</label>
                    </div>

                    <div class="hideThis inlineBlock">
                        <input class="radioSelect" type="radio" name="Exercise" id="hej2" value="2" />
                        <label class="radioLabel benchpress" for="hej2">Benchpress</label>
                    </div>

                    <div class="hideThis inlineBlock">
                        <input class="radioSelect" type="radio" name="Exercise" id="hej3" value="3" />
                        <label class="radioLabel deadlift" for="hej3">Deadlift</label>
                    </div>
                </div>
                <div id="dropdown">
                    
                    <select id="exerVariNameS" name="exerVariNameS" class="hideThis workoutVariSelect insertWorkoutBoxes">
                        
                            <option  value="">Squat</option>
                        }
                    </select>
                    
                    <select id="exerVariNameB" name="exerVariNameB" class="hideThis workoutVariSelect insertWorkoutBoxes">
                      
                            <option selected=@(Request.Form["exerVariNameB"] == get.exerVariName) value="">Benchpress</option>
                        }
                    </select>
                    
                    <select id="exerVariNameD" name="exerVariNameD" class="hideThis workoutVariSelect insertWorkoutBoxes">
                        
                            <option  value="">Deadlift</option>
                        }
                    </select>
                </div>
                
                <select id="exerVariNameA" name="exerVariNameA" class="hideThis workoutVariSelect insertWorkoutBoxes">
                    
                        <option  value="">Assistance</option>
                    }
                </select>
                <!-- Textbox for changing daily max on secondary exercises. -->
                <input id="dailyPR" placeholder="Daily Max" name="dailyPR" type="text" size="50" value="" class=" hideThis insertWorkoutBoxes" />
                <!-- Textbox for amount of weight. -->
                <input placeholder="Weight" name="Kg" type="text" size="50" value="" class="insertWorkoutBoxes" />
                <!-- Textbox for number of sets. -->
                <input placeholder="Sets" name="Sett" type="number" size="50" value="" class="insertWorkoutBoxes" />
                <!-- Textbox for number of reps. -->
                <input placeholder="Reps" name="Rep" type="number" size="50" value="" class="insertWorkoutBoxes" />
                <!-- Textbox for date of workout. -->
                <input placeholder="Date" type="text" spellcheck="false" autocomplete="off"
                       class="datepicker workoutVariSelect capitalFirst insertWorkoutBoxes" name="Date" value="" readonly="readonly" />
                <!-- Form submit button. -->
                <a class="AddBtn">Save</a>
            </div>
        </form>
        </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

不使用硬编码所有输入名称，而是使用更通用的选择器并对它们进行循环。然后指定:visible，以便只检查正在显示的内容。

$(".AddBtn").click(function() {
    var valid = true;
    $(".insertWorkoutBoxes:visible").each(function() {
        if (this.value == '') {
            valid = false;
            return false;
        }
    });
    if (valid) {
        mySubmit($(this));
    } else {
        $("#errorFieldReqMsg").fadeIn('slow');
        setTimeout(function () { $("#errorFieldReqMsg").fadeOut('slow'); }, 2000);
    }
});
相关问题
最新问题