Привязка скрипта проверки к форме в плагине jQuery Facebox

Я делаю небольшую страницу "Вы даете мне свой адрес электронной почты, я дам вам УДИВИТЕЛЬНУЮ песню" для группы товарищей. Я пытаюсь заставить работать простую проверку формы javascript (электронная почта) при отправке из с помощью плагина jQuery Facebox. Я обнаружил, что вам нужно связать функцию проверки JS после того, как Facebox открылся, или она не работает. Основа для этого изложена в документации по Facebox и должна выглядеть примерно так: $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... }), Как упоминалось ниже, я не думал, что это должно быть так, поскольку я думал, что Facebox показывает только скрытый элемент, включенный в CSS-параметры Facebox, но его обязательно нужно привязать к обработчику событий только при открытии Facebox.

Что ж, получается, что я просто не могу заставить его работать (за исключением Firefox, что означало, что отладка с помощью Firebug была бесполезной!) - вы можете поместить любой старый gumpf в форму электронной почты и отправить его, и он с радостью отправит подтверждение "asdsdf" или что я набрал в то время.

Код ниже, я очень признателен за любую помощь в этом!

Спасибо за ваше время.

Богатые

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Track download</title> 
    <meta name="image:Background" content="images/background.jpg" /> 
    <link rel="stylesheet" type="text/css" href="reset-min.css" /> 
    <link rel="stylesheet" type="text/css" href="facebox.css" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/facebox.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() {
        $("a[rel*=facebox]").facebox();
        });
    </script>
    <script type="text/javascript"> 
    function validateForm(){       
        var x=document.forms["emailForm"]["emailAddress"].value;
        var atpos=x.indexOf("@");
        var dotpos=x.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
            alert("Not a valid e-mail address");
            return false;
        }
    }); 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 
        <h1>Gorgeous George</h1><br /> 
        <h2><a href="#user" rel="facebox">Download</a> our new track!</h2><br /><br /> 
        <p>Follow us on <a href="http://gorgeousgeorgetheband.tumblr.com" target="_blank">Tumblr</a></p> 
        <p>Follow us on <a href="http://soundcloud.com/gorgeous-george-the-band" target="_blank">Soundcloud</a></p> 

            <div id="user"> 
                <form action="index.php" method="post" name="emailForm" onsubmit="return validateForm();"> 
                <fieldset> 
                    <h3 class="black">Email Address:</h3><br /> 
                    <input id="emailAddress" id="emailForm" name="emailAddress" onfocus="(this.value == &quot;Enter Email Address&quot;) ? this.value = &quot;&quot; : this.value" size="30" type="text" value="Enter Email Address" width="28" /><br /> 
                    <input type="submit" value="Submit" /> 
                    </fieldset> 
                </form> 
            </div>        <img src="images/gorgeousGeorge.jpg" alt="Gorgeous George" class="mainImage" /> 
    </div> 
</body> 
</html>
Источник

4 ответа

Решение

Джон Q упомянул, что facebox создает копию элементов, поэтому, чтобы обратиться к любому элементу в окне, я дал всем класс вместо идентификатора, а затем сослался на него следующим образом:

$($('.email')[1])

Затем, к сожалению, мне пришлось свернуть мою собственную проверку, потому что любой плагин все еще не работал. Вот один пример:

if($($('.email')[1]).val().length <= 0){
    return false;
}

Что-то вроде взлома, но надеюсь, что это поможет.

Источник

Facebox делает копию любого элемента страницы, на который вы указываете... он не просто скрывает / показывает этот элемент страницы с дополнительной обработкой CSS, чтобы сделать его модальным.

Например, если у вас есть форма с id='x', то после запуска facebox вы фактически получите две формы с id='x'... ту, которую facebox создает на лету из вашего оригинала.. и ваш оригинал. В дереве DOM элемент facebox (тот, который видит пользователь) будет вторым... и не будет существовать до тех пор, пока facebox не создаст его.

Источник

Используйте ajax для вызова формы, хранящейся в отдельном файле, таким образом, у вас не будет дубликатов, и тогда скрипт для проверки будет работать без проблем, кроме... конечно, в зависимости от того, как сообщения об ошибках выдаются пользователю,

Источник

Из того, что я понимаю в Facebox, содержимое модального окна всегда сохраняется на странице, но просто скрыто (отображением: нет), пока не потребуется. Поэтому вам не нужно связывать валидацию после загрузки facebox, так как элементы находятся в DOM сразу после загрузки страницы.

Имея это в виду, попробуйте следующий HTML. Я добавил в jQuery validate, поскольку он прост в использовании и экономит, изобретая велосипед заново. И под колесом я подразумеваю валидацию формата адреса электронной почты:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title><!-- Insert your title here --></title> 
    <meta name="image:Background" content="images/background.jpg" /> 
    <link rel="stylesheet" type="text/css" href="reset-min.css" /> 
    <link rel="stylesheet" type="text/css" href="facebox.css" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/facebox.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js"></script>

    <script type="text/javascript"> 
        $(document).ready(function() {
            $("a[rel*=facebox]").facebox();

            $("#user FORM").validate({
                rules: { 
                    emailAddress { required: true, email: true }
                }
            });
        });
    </script>
</head> 
<body> 
    <div id="wrapper"> 
        <h1>Gorgeous George</h1><br /> 
        <h2><a href="#user" rel="facebox">Download</a> our new track!</h2><br /><br /> 
        <p>Follow us on <a href="http://gorgeousgeorgetheband.tumblr.com" target="_blank">Tumblr</a></p> 
        <p>Follow us on <a href="http://soundcloud.com/gorgeous-george-the-band" target="_blank">Soundcloud</a></p> 

            <div id="user"> 
                <form action="index.php" method="post" name="emailForm" onsubmit="return validateForm();"> 
                <fieldset> 
                    <h3 class="black">Email Address:</h3><br /> 
                    <input id="emailAddress" id="emailForm" name="emailAddress" onfocus="(this.value == &quot;Enter Email Address&quot;) ? this.value = &quot;&quot; : this.value" size="30" type="text" value="Enter Email Address" width="28" /><br /> 
                    <input type="submit" value="Submit" /> 
                    </fieldset> 
                </form> 
            </div>        <img src="images/gorgeousGeorge.jpg" alt="Gorgeous George" class="mainImage" /> 
    </div> 
</body> 
</html>

Существует больше способов стилизовать плагин валидации, но это, по крайней мере, сработает для вас.

Источник
Другие вопросы по тегам