วิธีตรวจสอบว่าแบบฟอร์มถูกต้องหรือไม่โดยใช้โปรแกรม jQuery Validation Plugin

96

ผมมีรูปแบบกับคู่ของปุ่มและฉันใช้ jQuery การตรวจสอบจากปลั๊กอินhttp://jquery.bassistance.de/validate/ ฉันแค่อยากรู้ว่ามีวิธีใดบ้างที่ฉันสามารถตรวจสอบได้ว่าแบบฟอร์มนั้นถือว่าอยู่ในสถานะที่ถูกต้องหรือไม่โดยปลั๊กอินตรวจสอบ jquery จากที่ใดก็ได้ในรหัสจาวาสคริปต์

javascript jquery jquery-validate

— ไจ Hablutzel
แหล่งที่มา

2

สำหรับผู้ที่ต้องการใช้ HTML5 และ vanilla JS (no jQuery): stackoverflow.com/questions/12470622/…

— 2540625

145

ใช้.valid()จากปลั๊กอิน jQuery Validation:

$("#form_id").valid();

ตรวจสอบว่าแบบฟอร์มที่เลือกถูกต้องหรือไม่หรือองค์ประกอบที่เลือกทั้งหมดถูกต้อง ต้องเรียก validate () บนแบบฟอร์มก่อนที่จะตรวจสอบโดยใช้วิธีนี้

โดยรูปแบบที่มีid='form_id'เป็นรูปแบบที่มีการ.validate()เรียกใช้แล้ว

— Andrew Whitaker
แหล่งที่มา

ขอบคุณฉันทำสิ่งที่ชอบอยู่แล้ว: $ j ("# myform label.error") each (function (i, e) {if ($ j (e) .css ('display')! = 'none' ) (มีอยู่จริง = true;}}); : S Thanks

— Jaime Hablutzel

@jaime: ไม่มีปัญหายินดีที่จะช่วย:)

— Andrew Whitaker

ไม่จำเป็นต้องมี .validate () ทำงานบนแบบฟอร์มก่อน คุณสามารถทำได้ง่ายๆ if (form.valid ()) {} และจะได้ผลโดยที่ 'form' คือองค์ประกอบของฟอร์มที่คุณกำหนดเป้าหมาย

— Gareth Daine

13

TypeError: $ ("# myForm") valid () ไม่ใช่ฟังก์ชัน

— artgrohe

4

หากคุณได้รับการTypeError valid() not a functionเพิ่มปลั๊กอินลงในไฟล์ของคุณเนื่องจากปลั๊กอินไม่รวมอยู่ในไลบรารี jquery เช่น <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

— StackEdd

34

คำตอบปี 2015:เรามีสิ่งนี้นอกกรอบในเบราว์เซอร์สมัยใหม่เพียงใช้HTML5 CheckValidity APIจาก jQuery ฉันยังสร้างโมดูล jquery-html5-validityเพื่อทำสิ่งนี้:

npm install jquery-html5-validity

จากนั้น:

var $ = require('jquery')
require("jquery-html5-validity")($);

จากนั้นคุณสามารถเรียกใช้:

$('.some-class').isValid()

true

— mikemaccana
แหล่งที่มา

1

เราเรียกมันว่าทั้งรูปแบบไม่ใช่ในแต่ละองค์ประกอบได้ไหม

— parisssss

1

เยี่ยมมาก! สิ่งที่ฉันกำลังมองหา

— Fester

ฉันชอบสิ่งนี้มากกว่าvalidฟังก์ชั่นเพราะมันไม่ได้เรียกใช้validateฟังก์ชันและตรวจสอบความถูกต้องของฟอร์มของคุณ

— KevinAdu

@parisssss สร้างโมดูลขึ้นมาเพื่อเลือกหลายแบบตามที่ร้องขอ

— mikemaccana

23

คำตอบ @mikemaccana มีประโยชน์

และผมก็ยังใช้https://github.com/ryanseddon/H5F ที่พบในhttp://microjs.com เป็นโพลีฟิลล์บางประเภทและคุณสามารถใช้งานได้ดังนี้ (ใช้ jQuery ในตัวอย่าง):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}

— Antongorodezkiy
แหล่งที่มา

อันนี้ดีกว่าเนื่องจากไม่ได้เรียกใช้การตรวจสอบแบบฟอร์ม

— Bishoy Hanna

ทำงานกับแอตทริบิวต์รูปแบบ ขอบคุณ.

— MJ Vakili

6

valid () วิธีการ

http://docs.jquery.com/Plugins/Validation/valid

— ysrb
แหล่งที่มา

5

iContribute: ไม่เคยสายเกินไปสำหรับคำตอบที่ถูกต้อง

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

วิธีนี้จะทำให้การตรวจสอบ HTML5 พื้นฐานสำหรับฟิลด์ 'จำเป็น' เกิดขึ้นโดยไม่รบกวนการส่งมาตรฐานโดยใช้ค่า 'ชื่อ' ของฟอร์ม

— juan.benavides
แหล่งที่มา

โปรดทราบว่า:inputและ:visibleตัวเลือกคือส่วนขยาย jQuery ไม่ใช่ส่วนหนึ่งของ CSS ดูรายละเอียดในเอกสาร

— Geradlus_RU

3

รูปแบบนอกจากนี้ยังสามารถที่ไม่ถูกต้องเพราะการจับคู่รูปแบบและไม่เพียงเพราะหายไปฟิลด์ที่จำเป็น

— ตรงไปตรงมา

5

สำหรับกลุ่มอินพุตคุณสามารถใช้เวอร์ชันที่ปรับปรุงแล้วตามคำตอบของ @mikemaccana

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

ตอนนี้คุณสามารถใช้สิ่งนี้เพื่อตรวจสอบว่าแบบฟอร์มถูกต้องหรือไม่:

if(!$(".form-control").isValid){
    return;
}

คุณสามารถใช้เทคนิคเดียวกันนี้เพื่อรับข้อความแสดงข้อผิดพลาดทั้งหมด:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}

— Matias Medina
แหล่งที่มา

ฉันได้สร้างปลั๊กอิน jQuery เพื่อทำ. each () ให้คุณ

— mikemaccana

1

สำหรับ Magento คุณตรวจสอบการตรวจสอบความถูกต้องของแบบฟอร์มด้านล่าง

คุณสามารถลองสิ่งนี้:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

หวังว่านี่อาจช่วยคุณได้!

— คาซิมนูโรนี
แหล่งที่มา