【问题标题】:Bootstrap Validator submit formBootstrap Validator 提交表单
【发布时间】:2017-07-18 18:47:51
【问题描述】:

我现在正在使用 bootstrapValidator.min.js 0.5.3 来验证表单: https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js

现在这适用于我将发送邮件事件绑定到的联系表单。

但现在我想将它用于一个表单,他需要验证表单、发送邮件并提交表单,以便我可以 $_POST 获取字段以将其写入 mysql。

还请注意,当添加更多对象时,我有一个 foreach 循环来制作更多表单。 (表单用于申请工作,可在后台添加工作。)

代码:

我不会发布表单 html 和 PHP,因为我知道它们可以工作。除非被问到。它是一个很长的形式,我不想用离题的代码把它弄得乱七八糟。

验证器:

 jQuery('.form-job').each(function (i, obj) {
        jQuery(this).bootstrapValidator({
            fields: {
                firstname: {
                    validators: {
                        stringLength: {
                            min: 2,
                            message: 'Gelieve 2 of meer letters in te vullen.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw naam in.'
                        }
                    }
                },
                lastname: {
                    validators: {
                        stringLength: {
                            min: 2,
                            message: 'Gelieve 2 of meer letters in te vullen.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw achternaam in.'
                        }
                    }
                },
                street: {
                    validators: {
                        stringLength: {
                            min: 5,
                            message: 'Gelieve 5 of meer letters in te vullen.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw straat in.'
                        }
                    }
                },
                housenumber: {
                    validators: {
                        stringLength: {
                            max: 8,
                            message: 'Vul aub een geldige huisnummer in.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw huisnummer in.'
                        },
                    }
                },
                postal: {
                    validators: {
                        stringLength: {
                            min: 4,
                            max: 8,
                            message: 'Vul aub een geldige postcode in.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw postcode in.'
                        },
                    }
                },
                city: {
                    validators: {
                        stringLength: {
                            min: 2,
                            message: 'Gelieve 2 of meer letters in te vullen.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw stad in.'
                        }
                    }
                },
                country: {
                    validators: {
                        stringLength: {
                            min: 2,
                            message: 'Gelieve 2 of meer letters in te vullen.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw land in.'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'Vul aub uw e-mailadres in.'
                        },
                        emailAddress: {
                            message: 'Vul aub een geldig e-mailadres in.'
                        }
                    }
                },
                telephone: {
                    validators: {
                        numeric: {
                            message: 'Gelieve alleen nummers te gebruiken.',
                        },
                        stringLength: {
                            min: 9,
                            message: 'Gelieve 9 of meer cijfers in te vullen.'
                        },
                        notEmpty: {
                            message: 'Vul aub een geldig telefoonnummer in.'
                        }
                    }
                },
                motivation: {
                    validators: {
                        stringLength: {
                            min: 10,
                            max: 550,
                            message: 'Vul aub minstens meer dan 10 letters in en minder dan 550.'
                        },
                        notEmpty: {
                            message: 'Vul aub uw vraag in.'
                        }
                    }
                },
                cvurl: {
                    validators: {
                        file: {
                            extension: 'doc,docx,pdf,txt',
                            type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/txt',
                            maxSize: 5 * 1024 * 1024,   // 5 MB
                            message: 'Het geselecteerd bestand is niet geldig. Dit moet een .doc, .docx, .pdf of een .txt zijn en max 5 MB groot.'
                        }
                    }
                }
            }
        })
            .on('success.form.bv', function (e) {
                jQuery("#button").css('color', 'green');
                jQuery("#button").css('border', '2px solid green');
                jQuery(".alert-success").css('display', 'block');
                jQuery("#button").html('Verstuurd');
                jQuery(this).data('bootstrapValidator').resetForm();

                // Prevent form submission
                e.preventDefault();

                // Get the form instance
                var form = jQuery(e.target);

                // Get the BootstrapValidator instance
                var bv = form.data('bootstrapValidator');

                jQuery.post(my_ajax_object.ajax_url, form.serialize());

            });
    });

请不要介意荷兰语。任何荷兰语都不会影响问题,因为它只是显示的文本。

我也知道它说:

                // Prevent form submission
            e.preventDefault();

但是当我删除它或将其注释掉时,没有任何变化。

所以我需要它来验证、发送邮件(有效)并提交。

谢谢!

【问题讨论】:

    标签: jquery forms bootstrapvalidator


    【解决方案1】:

    所以我完成了这项工作。

    问题是我试图通过 BootstrapValidator 通过 ajax 槽 JS 发送邮件。

    所以我最终删除了在 JS 中定义任何内容的部分,我留下了这个:

    jQuery('.form-job').each(function (i, obj) {
            jQuery(this).bootstrapValidator({
                fields: {
                    firstname: {
                        validators: {
                            stringLength: {
                                min: 2,
                                message: 'Gelieve 2 of meer letters in te vullen.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw naam in.'
                            }
                        }
                    },
                    lastname: {
                        validators: {
                            stringLength: {
                                min: 2,
                                message: 'Gelieve 2 of meer letters in te vullen.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw achternaam in.'
                            }
                        }
                    },
                    street: {
                        validators: {
                            stringLength: {
                                min: 5,
                                message: 'Gelieve 5 of meer letters in te vullen.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw straat in.'
                            }
                        }
                    },
                    housenumber: {
                        validators: {
                            stringLength: {
                                max: 8,
                                message: 'Vul aub een geldige huisnummer in.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw huisnummer in.'
                            },
                        }
                    },
                    postal: {
                        validators: {
                            stringLength: {
                                min: 4,
                                max: 8,
                                message: 'Vul aub een geldige postcode in.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw postcode in.'
                            },
                        }
                    },
                    city: {
                        validators: {
                            stringLength: {
                                min: 2,
                                message: 'Gelieve 2 of meer letters in te vullen.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw stad in.'
                            }
                        }
                    },
                    country: {
                        validators: {
                            stringLength: {
                                min: 2,
                                message: 'Gelieve 2 of meer letters in te vullen.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw land in.'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'Vul aub uw e-mailadres in.'
                            },
                            emailAddress: {
                                message: 'Vul aub een geldig e-mailadres in.'
                            }
                        }
                    },
                    telephone: {
                        validators: {
                            numeric: {
                                message: 'Gelieve alleen nummers te gebruiken.',
                            },
                            stringLength: {
                                min: 9,
                                message: 'Gelieve 9 of meer cijfers in te vullen.'
                            },
                            notEmpty: {
                                message: 'Vul aub een geldig telefoonnummer in.'
                            }
                        }
                    },
                    motivation: {
                        validators: {
                            stringLength: {
                                min: 10,
                                max: 550,
                                message: 'Vul aub minstens meer dan 10 letters in en minder dan 550.'
                            },
                            notEmpty: {
                                message: 'Vul aub uw vraag in.'
                            }
                        }
                    },
                    cvurl: {
                        validators: {
                            file: {
                                extension: 'doc,docx,pdf,txt',
                                type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/txt',
                                maxSize: 5 * 1024 * 1024,   // 5 MB
                                message: 'Het geselecteerd bestand is niet geldig. Dit moet een .doc, .docx, .pdf of een .txt zijn en max 5 MB groot.'
                            }
                        }
                    }
                }
            })
        });
    

    然后我只是在提交按钮之后调用一个函数

    if (isset($_POST['submit'])
    

    (这是一个示例,切勿使用提交作为提交按钮的名称)。

    我调用的函数然后发送邮件并使用数据库部分的查询

    【讨论】:

      猜你喜欢
      • 2014-12-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-04-15
      • 1970-01-01
      相关资源
      最近更新 更多