PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

จะเช็คค่าว่างใน Jquery tab ทีละ tab ทำยังไงครับ

จะเช็คค่าว่างใน Jquery tab ทีละ tab ทำยังไงครับ
เช็คค่าว่างใน Jqury tab ก่อนกดปุ่ม next ในแต่ละขั้นครับ  รวบกวนช่วยแนะนำให้หน่อยครับ ถ้ามีโค๊ดให้ศึกษาจะขอบคุณมากครับ



โดย:  Eos7d IP: 49.0.115.xxx วันที่: 28-04-2015 เวลา: 17:32:29

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
รบกวนช่วยดูให้หน่อยครับ ไม่ได้สักที  ขอบคุณครับ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>jQeury.steps Demos</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/jquery.steps.css">
        <script src="../lib/modernizr-2.6.2.min.js"></script>
        <script src="../lib/jquery-1.9.1.min.js"></script>
        <script src="../lib/jquery.cookie-1.3.1.js"></script>
        <script src="../build/jquery.steps.js"></script>
                    <script>
                $(function ()
                {
                    $("#wizard").steps({
                        headerTag: "h2",
                        bodyTag: "section",
                        transitionEffect: "slideLeft"
                    });
                });
            </script>
            
 <script>           
 var form = $("#frm_sent").show();
 
form.steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        // Allways allow previous action even if the current form is not valid!
        if (currentIndex > newIndex)
        {
            return true;
        }
        // Forbid next action on "Warning" step if the user is to young
        if (newIndex === 3 && Number($("#age-2").val()) < 18)
        {
            return false;
        }
        // Needed in some cases if the user went back (clean up)
        if (currentIndex < newIndex)
        {
            // To remove error styles
            form.find(".body:eq(" + newIndex + ") label.error").remove();
            form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onStepChanged: function (event, currentIndex, priorIndex)
    {
        // Used to skip the "Warning" step if the user is old enough.
        if (currentIndex === 2 && Number($("#age-2").val()) >= 18)
        {
            form.steps("next");
        }
        // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
        if (currentIndex === 2 && priorIndex === 3)
        {
            form.steps("previous");
        }
    },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
        alert("Submitted!");
    }
}).validate({
    errorPlacement: function errorPlacement(error, element) { element.before(error); },
    rules: {
        confirm: {
            equalTo: "#password-2"
        }
    }
});</script>

</head>
    <body>
        

            
         
<form id="frm_sent" action="#">
 <div id="wizard">              
            
              <h2>First Step</h2>
                <section>
                    <legend>Account Information</legend>
 
        <label for="userName-2">User name *</label>
        <input id="userName-2" name="userName" type="text" class="required">
        <label for="password-2">Password *</label>
        <input id="password-2" name="password" type="text" class="required">
        <label for="confirm-2">Confirm Password *</label>
        <input id="confirm-2" name="confirm" type="text" class="required">
        <p>(*) Mandatory</p>
                </section>

                <h2>Second Step</h2>
                <section>
                    <legend>Profile Information</legend>
 
        <label for="name-2">First name *</label>
        <input id="name-2" name="name" type="text" class="required">
        <label for="surname-2">Last name *</label>
        <input id="surname-2" name="surname" type="text" class="required">
        <label for="email-2">Email *</label>
        <input id="email-2" name="email" type="text" class="required email">
        <label for="address-2">Address</label>
        <input id="address-2" name="address" type="text">
        <label for="age-2">Age (The warning step will show up if age is less than 18) *</label>
        <input id="age-2" name="age" type="text" class="required number">
        <p>(*) Mandatory</p>
                </section>

                <h2>Third Step</h2>
                <section>
                     <legend>You are to young</legend>
 
        <p>Please go away ;-)</p>
                </section>

                <h2>Forth Step</h2>
                <section>
                    <legend>Terms and Conditions</legend>
 
        <input id="acceptTerms-2" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
                </section>
            
            
        </div></form>
    </body>
</html>


โดย:  Eos7d IP: 49.0.98.xxx วันที่: 29-04-2015 เวลา: 18:28:04
 ความคิดเห็นที่ 1
ใช้ plugin tab ตัวไหนอยู่ อาจจะต้องดูประกอบ ส่วนแนวทาง
ถ้าข้อมูลทั้งหมดอยู่ใน form เดียวกัน หรือมี form เดียว และก็ซ่อนและแสดงทีละส่วน
สามารถใช้ jquery เช็คค่าข้อมูลทีละส่วน ก่อนแล้วค่อย ขยับ tab ไปจนถึงขั้นตอนสุดท้าย แล้วให้ทำการ 
submit ค่าครั้งเดียว  ลองไปดูเว็บนี้เป็นตัวอย่าง

http://www.jquery-steps.com/Examples#basic-form

โดย:  Ninenik IP: 1.47.202.xxx วันที่: 28-04-2015