การตรวจสอบข้อความอินพุต/ประเภทว่างเปล่า/เป็นโมฆะด้วย jQuery หรือ JavaScript

ฉันนิ่งงัน. ฉันกำลังพยายามตรวจสอบเพื่อดูว่าประเภทอินพุต: ข้อความของฉันว่างเปล่าหรือเป็นโมฆะใน JavaScript ของฉัน ขณะนี้ฉันมีสิ่งนี้:

        if ($("#startDate").val().trim().length() === 0)
    {
        alert("Please fill out the required fields.");
    }

ฉันได้ลองแล้ว: .val() === "", .val() == "", .length() === 0, .length() == 0, .length() < 1, .val().length() === 0, val().trim().length() < 1, .trim().length() < 1, .text() === "", .text() == "", !$("#startDate").val()

HTML ของฉันคือ:

<fieldset>
<label for="startDate_[pk]" style="display:block; width:100%;text-align:left">Start Time</label>
<input type="text" name="startDate_[pk]" id="startDate_[pk]" style="width:75px;display:inline" placeholder="pick date" />
@@
<select name="startTime_[pk]" id="startTime_[pk]" style="display:inline;" disabled="disabled">
@{
var time = DateTime.Now.Date.AddHours(8);
for (int i = 480; i < 1260; i += 15)
{
<option value="@i">@DateTime.Now.Date.AddMinutes(i).ToShortTimeString()</option>
}
}
</select>
</fieldset>

ฉันได้ลองสิ่งนี้แล้ว:

        $('input[class^="dateValidate"]').each(function () {
        if($(this).val().trim().length === 0)
        {
            alert("Please fill out the required fields.");
        }

ฉันกำลังจะหมดความคิด

****อัปเดต****

การตรวจสอบความถูกต้องใช้ได้กับวัตถุที่เลือกหนึ่งรายการ แต่เมื่อคุณเลือกมากกว่าหนึ่งรายการ การตรวจสอบความถูกต้องจะใช้ได้กับออบเจ็กต์แรกเท่านั้น นี่คือรหัสของฉัน:

    function validate()
{
    var startDate = $('[id^="startDate"]').filter(function(){
        return $(this).val().length!==0;
    });
    var showingType = $('[id^="tShowingType"]').filter(function () {
        return $(this).val() === "";
    });
    var startTime = $('[id^="startTime"]').filter(function () {
        return $(this).val() === "";
    });
    var endTime = $('[id^="endTime"]').filter(function () {
        return $(this).val() === "";
    });

    if (startDate.length == 0 || showingType.val() === "" || startTime.val() === "" || endTime.val() === "")
    {
        alert("Please fill out the required fields.");
    }
    else
    {
        UI.goToConfirmStep();
    }

ฉันเหนื่อย:

var startDate = $('[id^="startDate"]').filter(function(){
        return $(this).val().length!==0
var startDate = $('[id^="startDate"]').filter(function(){
        return $(this).val().length===0
startDate.length == 0
startDate.length < 0
startDate.length < 1

person Kevin Fischer    schedule 06.07.2015    source แหล่งที่มา
comment
คุณสามารถโพสต์ HTML ได้เช่นกัน?   -  person Amit.rk3    schedule 06.07.2015
comment
ปัญหาที่คุณได้ลองคืออะไร? พวกเขาไม่ทำงานเหรอ?   -  person Matt Zeunert    schedule 06.07.2015
comment
พวกเขาไม่ได้กดการแจ้งเตือน มันแค่ล้มเหลวโดยไม่มีข้อผิดพลาด   -  person Kevin Fischer    schedule 06.07.2015
comment
ลองใช้ if($("#startDate").val().trim()) เงื่อนไขนี้ควรดูแลสตริงที่เป็นเท็จ (เป็นโมฆะหรือไม่ได้กำหนดหรือว่างเปล่า)   -  person Sudhansu Choudhary    schedule 06.07.2015
comment
สิ่งหนึ่งที่: $("#startDate").val().trim().length === 0 ความยาวไม่ใช่ฟังก์ชัน แต่เป็นคุณสมบัติ แต่ฉันเดาว่านี่เป็นการพิมพ์ผิดเนื่องจากคุณบอกว่าไม่มีข้อผิดพลาด   -  person dfsq    schedule 06.07.2015
comment
ตัวเลือก $("#startDate") จะไม่เลือกองค์ประกอบใน HTML ของคุณที่มี id เป็น: startDate_[pk]; คุณต้องการ $('#startDate_[pk]') หรือเพียงแค่ $('input[id^=startDate]')   -  person David says reinstate Monica    schedule 06.07.2015
comment
มันทำงานกับอินพุตอื่นๆ ของฉันทั้งหมด อันนี้บังเอิญเป็นตัวใช้เลือกวันที่   -  person Kevin Fischer    schedule 06.07.2015
comment
[pk] ถูกโหลดขึ้นมาแล้ว มันเป็นไกด์ที่กำลังหมดลง   -  person Kevin Fischer    schedule 06.07.2015
comment
@KevinFischer อัปเดตคำตอบของฉัน ลองอีกครั้ง!   -  person Sudhansu Choudhary    schedule 06.07.2015
comment
น่าเศร้าที่ @SudhansuChoudhary นั่นไม่ได้ผล   -  person Kevin Fischer    schedule 06.07.2015


คำตอบ (4)


ดูเหมือนว่าคุณแมปรหัส startDate ในตัวเลือกไม่ถูกต้อง ในรหัสของคุณ คุณมี ID เช่น startDate_[pk] ดังนั้นคุณจึงต้องมีตัวเลือก ขึ้นต้นด้วยเหมือนด้านล่าง

 var emptyInputs= $('[id^="startDate"]').filter(function(){
     return $(this).val().length===0;
 });

if(emptyInputs.length>0){
   alert("Please fill out the required fields.");
}

สาธิตซอ

person Amit.rk3    schedule 06.07.2015
comment
เข้าชมสามครั้งเนื่องจากมีสามแท็กที่มี startDate เป็นส่วนหนึ่งของชื่อ - person Kevin Fischer; 06.07.2015
comment
และฉันไม่สามารถเปลี่ยนชื่อได้จริงๆ ในตอนนี้ โดยไม่ต้องเปลี่ยนโค้ดอื่นๆ มากมาย ฉันคิดว่าฉันสามารถลองชั้นเรียนและค้นหาสิ่งนั้นได้ - person Kevin Fischer; 06.07.2015
comment
โอเค ตอนนี้มันใช้งานไม่ได้กับช่องป้อนข้อมูลหลายช่องที่มีการแนบคำแนะนำที่แตกต่างกัน ตัวอย่าง: ฉันเลือกหนึ่งรายการและการตรวจสอบใช้งานได้ แต่เมื่อฉันเลือกมากกว่าหนึ่งรายการ การตรวจสอบความถูกต้องจะใช้ได้เฉพาะกับอันแรกเท่านั้น ไม่ใช่อันที่เหลือ - person Kevin Fischer; 06.07.2015
comment
@KevinFischer: อัปเดตอีกครั้ง ไม่ทราบข้อกำหนดนี้ :) - person Amit.rk3; 06.07.2015
comment
จริงๆ ไม่คิดว่าจะเปลี่ยนไปมากนัก! ทดสอบตอนนี้ จริงๆ แล้วฉันปรับมันเป็น EmptyInputs.length ‹ 0 ในโค้ดทดสอบของฉัน ฉันได้อัปเดตคำถามของฉันด้านบนเพื่อดูข้อมูลเพิ่มเติม - person Kevin Fischer; 06.07.2015
comment
ฉันได้อัปเดตคำถามด้วยสิ่งที่ฉันได้ลองไปแล้ว ยังคงตรวจสอบวัตถุแรกได้อย่างสมบูรณ์ (เย้!) แต่น่าเสียดายที่มันไม่ตรวจสอบวัตถุใด ๆ ต่อไปนี้ - person Kevin Fischer; 07.07.2015

คุณไม่ได้กำหนดเป้าหมายรหัสอย่างถูกต้อง

if(!$("#startTime_[pk]").val())

if (!$('#startTime_[pk]').val()) {
  console.log('input empty');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="startTime_[pk]" type="text" value="" />

อัปเดต

[pk] เปลี่ยนแปลงจริง ๆ เพราะเป็นแนวทางที่โหลดขึ้นเมื่อโหลดหน้าเว็บ

จากนั้นใช้ตัวเลือก เริ่มต้นด้วย

if(!$('[id^="startTime"]').val())
person AmmarCSE    schedule 06.07.2015
comment
ฉันก็ลองอันนั้นเหมือนกัน ลืมที่จะเพิ่มว่า จะเพิ่มตอนนี้ - person Kevin Fischer; 06.07.2015
comment
@KevinFischer นั่นหมายความว่ามีอย่างอื่นเกิดขึ้นในรหัสของคุณ ฉันดูตัวอย่างในคำตอบของฉัน มันใช้งานได้ - person AmmarCSE; 06.07.2015
comment
@KevinFischer ดูคำตอบที่อัปเดตของฉัน คุณไม่ได้กำหนดเป้าหมาย ID อย่างถูกต้องสำหรับ html ที่กำหนด - person AmmarCSE; 06.07.2015
comment
[pk] เปลี่ยนแปลงจริง ๆ เพราะเป็นแนวทางที่โหลดขึ้นเมื่อโหลดหน้าเว็บ - person Kevin Fischer; 06.07.2015
comment
มันไม่กดแจ้งเตือนเมื่อไม่มีอะไรในกล่องอินพุต - person Kevin Fischer; 06.07.2015

length ไม่ใช่ฟังก์ชัน นี่คือตัวอย่างของโค้ดด้านบนที่ทำงานโดยการลบวงเล็บหลัง length

 function validate() {
   if ($("#tShowingType").val() === "" || ($("#startDate").val().trim().length === 0) || ($("#startTime").val() === "") || ($("#endTime").val() === "")) { 
     alert("Please fill out the required fields."); } else { UI.goToConfirmStep();
    }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type='text' id='startDate' />
<button onclick='validate();' >Button</button>

person depperm    schedule 06.07.2015
comment
มันไม่โดนการแจ้งเตือนหรือโดนอย่างอื่นด้วย - person Kevin Fischer; 06.07.2015
comment
@KevinFischer jquery ที่เหลือของคุณคืออะไร - person depperm; 06.07.2015
comment
` ฟังก์ชั่นตรวจสอบ() { //if ($(#tShowingType).val() === || ($(#startDate).val().length === 0) || ($(#startTime) val() === ) || ($(#endTime).val() === )) if (!$('[id^=startTime]').val())// || ($(#startTime).val() === ) || ($(#endTime).val() === )) { alert(กรุณากรอกข้อมูลในช่องที่ต้องกรอก); } อื่น ๆ { UI.goToConfirmStep(); } } ` มันเป็นฟังก์ชันง่ายๆ ผลลัพธ์สุดท้ายจะรวมช่องป้อนข้อมูลอื่น ๆ เหล่านั้นเข้าด้วยกันเพื่อสร้างคำสั่ง if เพื่อตรวจสอบ - person Kevin Fischer; 06.07.2015
comment
เมื่อไหร่จะเรียก validate ล่ะ? - person depperm; 06.07.2015
comment
ควรมีช่องว่างหลังปุ่ม และก่อน onclick - person depperm; 06.07.2015
comment
นั่นก็คือ ฉันพิมพ์-o ที่นี่และแก้ไขมัน - person Kevin Fischer; 06.07.2015

เปลี่ยนเงื่อนไขดังต่อไปนี้:

if(!$('[id^="startDate"]').val()){
        alert("Please fill out the required fields.");
    }
person Sudhansu Choudhary    schedule 06.07.2015