javascript - 包括基本的 Javascript

Question

我正在尝试在 javascript 中包含一个非常简单的函数，但不知道该放在哪里。我有一个 Wordpress 网站，我编写的所有 js 都在特定于不同页面的模块中。

import $ from 'jquery';
import Registration from './modules/Registration';
import Results from './modules/Results';
import Minutes from './modules/Minutes';
import Contact from './modules/Contact';
import Profile from './modules/Profile';
import Awards from  './modules/Awards';
import MenuIcon from  './modules/DYS_Menu';
import GoogleMap from './modules/GoogleMap';

require('jquery-ui/ui/widgets/dialog');

var registration = new Registration();
var results = new Results();
var minutes = new Minutes();
var contact = new Contact();
var profile = new Profile();
var awards = new Awards();
var dys_menu = new MenuIcon();
var googleMap = new GoogleMap();

我需要做的是创建一个名为 recaptchaCallback 的函数，它将激活表单上的发送按钮。如果我将脚本标签放入页脚并对 JS 进行硬编码，它可以工作，但我希望它包含在 scripts-js 中，它使用 npm 编译为 scripts-bundled.js。

function recaptchaCallback(){
    console.log("Captcha Checked");
}

我只是不知道在哪里放置该功能，因为我尝试过的所有地方都返回并说找不到功能。

帮助将不胜感激

这是 Contact.js

import $ from 'jquery';
class Contact {

    constructor(){
        $('#club-rep').attr('hidden',true);  
        $('#club').attr('hidden',true);  
        this.events();  
    }

    events() {
        //  Register Listeners
        $('#to-group').on('change', this.checkRepSelect.bind(this));
        $("#fromName").on("focus", this.resetColor.bind(this));      // Change color back to default
        $("#fromPhone").on("focus", this.resetColor.bind(this));      // Change color back to default
        $("#fromEmail").on("focus", this.resetColor.bind(this));      // Change color back to default
        $("#msgForm").on('submit', this.validateFields.bind(this));
    }

    resetColor(e){
        // Change color back to default
        $(e.target).css('border-color','');
    }

    validateFields(e){
        console.log("Attempting to send");
        var allValid = true;
        //  Check whether some required fields are missing
        if (!validTextField($("#fromName"),1)){
            allValid=false;
        }
        if (!validNumericField($("#fromPhone"),0)){
            allValid=false;
        }
        if (!validEmailField($("#fromEmail"), 1)){
            allValid=false;
        }
        if ($('#g-recaptcha-response').val() === ''){
            allValid=false;
        }
        if (!allValid){
            e.preventDefault();
        }
    }

    checkRepSelect(e){
        if ($('#to-group').val()=='ClubRep'){
            $('#club-rep').removeAttr('hidden');
            $('#club').removeAttr('hidden');
        } else {
            $('#club-rep').attr('hidden',true);
            $('#club').attr('hidden',true);
        }
    }
}

function validTextField( field, minLength ){
    var fieldText = $(field).val();
    var fieldValid = true;
    if (fieldText.length < minLength ){
        fieldValid = false;
    } else {
        if (!fieldText.match(/^[A-Za-z ]+$/) && fieldText.length != 0){
            fieldValid = false;
        }
    }
    if (!fieldValid){
        field.css("border-color", "red");
    }
    return fieldValid;
}

function validNumericField( field, minLength ){
    var fieldText = $(field).val();
    var fieldValid = true;
    if (fieldText.length < minLength ){
        fieldValid = false;
    } else {
        if (!fieldText.match(/^[0-9 ]+$/) && fieldText.length != 0){
            fieldValid = false;
        }
    }
    if (!fieldValid){
        field.css("border-color", "red");
    }
    return fieldValid;
}

function validEmailField( field, minLength ){
    var fieldText = $(field).val();
    var fieldValid = true;
    if (fieldText.length < minLength ){
        fieldValid = false;
    } else {
        if (!fieldText.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)){
            fieldValid = false;
        }
    }
    if (!fieldValid){
        field.css("border-color", "red");
    }
    return fieldValid;
}

export default Contact;

标签： javascriptwordpressmodule