在Jquery调用之间添加其他函数

Adding other functions between Jquery calls

本文关键字:其他 函数 添加 之间 Jquery 调用      更新时间:2023-09-26

下面是该程序的代码。基本上,我有一些jQuery调用可以淡入淡出div。但是,在Jquery淡出并在另一个div中淡出之前,我想检查表单验证和用户输入。

我的问题是,如何在Jquery之间正确地添加其他函数,就像我为validateForm()所做的那样&validatePostalCode()?

JQUERY

<script type="text/jquery>
    $(document).ready(function() {
        $("#welcome").fadeIn('fast');
        $('#forward').click(function(e) {
            $('#welcome').fadeOut('fast', function() {
                $('#service').fadeIn('fast');
            });
        });
        $('#previous-service').click(function(e) {
            $('#service').fadeOut('fast', function() {
                $('#welcome').fadeIn('fast');
            });
        });
        $('#next-service').click(function(e) {
            postalCode();
            validatePostalCode(true);
            $('#service').fadeOut('fast', function() {
                $('#match').fadeIn('fast');
            });
        });
        $('#previous-match').click(function(e) {
            $('#match').fadeOut('fast', function() {
                $('#service').fadeIn('fast');
            });
        });
        $('#next-match').click(function(e) {
            $('#match').fadeOut('fast', function() {
                $('#information').fadeIn('fast');
            });
        });
        $('#previous-information').click(function(e) {
            $('#information').fadeOut('fast', function() {
                $('#match').fadeIn('fast');
            });
        });
        $('#next-information').click(function(e) {
            validateForm();
            $('#information').fadeOut('fast', function() {
                $('#confirmation').fadeIn('fast');
            });
        });


JAVASCRIPT

<script type="text/javascript">
    function validateForm() {
        var x = document.forms["#information"]["#first_name"].value;
        if (x == null || x == "") {
            alert("First name must be filled out");
            return false;
        }
    }
    function validatePostalCode() {
        var x = document.forms["#serviceForm"]["#postal"].value;
        if (x == null || x == "") {
            alert("Oops, the postal code must be filled out!");
            return false;
        }
    }
</script>
<script type="text/javascript">
    function postalCode() {
        var text = document.getElementById('postal').value;
    }
</script>

HTML

<form id="informationForm" action="" onsubmit="return validateForm()" method="">
    <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" class="form-control" id="first_name" autofocus required>
    </div>
jQuery也是javascript。

您可以在<script></script>标记之间添加任意多的javascript。

示例:

<script>
  function normalJavascript(){
     alert("hello i am js");   
  }
  $(function(){
    alert("I am the jQuery on page ready function");
    normalJavascript();
  }
</script>