PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา จะเช็คค่าว่างใน 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 ด้านล่าง )
 ความคิดเห็นที่ 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
 ความคิดเห็นที่ 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