processForm

processForm

关注
发信
关注(28)粉丝(399)

提交时停止表单刷新页面

本文介绍了提交时停止表单刷新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何避免在按下发送按钮时无法刷新页面？



验证设置工作正常，所有字段都去红色，但随后页面立即刷新。我对JS的知识是相对基本的。



特别是我认为底部的 processForm（）函数是' bad'。

HTML 

  < form id =prospects_formmethod =post> 
< input id =form_nametabindex =1class =boxsizetype =textname =nameplaceholder =Full name *maxlength =80value =/> ; 
< input id =form_emailtabindex =2class =boxsizetype =textname =emailplaceholder =Email *maxlength =100value =/> 
< input id =form_subjectclass =boxsizetype =textname =subjectplaceholder =Subject *maxlength =50value =FORM：Row for OUBC/> 
< textarea id =form_messageclass =boxsizename =messageplaceholder =Message *tabindex =3rows =6cols =5maxlength =500> < / textarea的> 
 
 < div id =form_validation> 
< span class =form_captcha_code>< / span> 
< input id =form_captchaclass =boxsizetype =textname =form_captchaplaceholder =Enter codetabindex =4value =/> 
< / div> 
< div class =clearfix>< / div> 
< / form>

JS 

  $（document）.ready（function（）{
 
 //将活动类添加到输入
 $（＃prospects_form .boxsize） .focus（function（）{$（this）.addClass（hasText）;}）; 
 $（＃form_validation .boxsize）。focus（function（）{$（this）.parent（） .addClass（hasText）;}）; 
 //从输入中移除活动类（如果为空）
 $（＃prospects_form .boxsize）。blur（function（）{if（this。值===）{$（this）.removeClass（hasText）;}}）; 
 $（＃form_validation .boxsize）。blur（function（）{if（this.value = （hasText）;}}）; 
 
 
 
 //////// ///////// 
 // START VALABATION 
 $（＃prospects_form）。ready（function（）{
 
 // DEFINE GLOBAL VARIABLES 
 var valName = $（'＃form_name'），
 valEmail = $（＃form_email），
 valEmailFormat = / ^（（[[^<>（）[\ ] \\;：。\s @ \] +（\ [^<>（）[\] \\\ 。，;：\s @ \ ] +）*）|（\ + \））@（（\ [[0-9] {1,3} \ [O-。 9] {1,3} \ [0-9] {1,3} \ [0-9] {1,3} \]）|。。（（[A-ZA-Z\-0 -9] + \。）+ [a-zA-Z] {2，}））$ /，
 valMsg = $（'＃form_message'），
 valCaptcha = $（'＃form_captcha '），
 valCaptchaCode = $（'。form_captcha_code'）; 
 
 
 
 //产生captcha 
函数randomgen（）{
 var rannumber =; 
 //遍历1到9,4次
（ranNum = 1; ranNum< = 4; ranNum ++）{rannumber + = Math.floor（Math.random（）* 10）.toString（） ; } 
 //将captcha应用于元素
 valCaptchaCode.html（rannumber）; 
} 
 randomgen（）; 
 
 $ b $ // CAPTCHA VALIDATION 
 valCaptcha.blur（function（）{
 function formCaptcha（）{
 if（valCaptcha.val（）== valCaptchaCode.html（））{
 //错误
 valCaptcha.parent（）。addClass（invalid）; 
 return false; 
} else {
 / /更正
 valCaptcha.parent（）。removeClass（invalid）; 
 return true; 
} 
} 
 formCaptcha（）; 
}） ; 
 
 //如果输入
，则从captcha中删除无效的类valCaptcha.keypress（function（）{
 valCaptcha.parent（）。removeClass（invalid）; 
 }）; 
 
 $ b // EMAIL VALIDATION（BLUR）
 valEmail.blur（function（）{
 function formEmail（）{
 if（！valEmailFormat.test （valEmail.val（））&& valEmail.val（）！==）{
 //错误
 valEmail.addClass（invalid）; 
} else { 
 //正确
 valEmail.removeClass（invalid）; 
} 
} 
 formEmail（）; 
}）; 
 
 //输入
 valEmail.keypress（function（）{
 valEmail.removeClass（invalid）; 
}）; 
 
 $ b $ //验证提交
 $（'＃prospects_form'）。submit（function（）{
 console.log（'user hit send button'） ; 
 
 // EMAIL VALIDATION（SUBMIT）
函数formEmailSubmit（）{
 if（！valEmailFormat.test（valEmail.val（）））{
 //不正确的
 valEmail.addClass（invalid）; 
} else {
 //正确
 valEmail.removeClass（invalid）; 
} 
 } 
 formEmailSubmit（）; 
 
 // Validate captcha 
 function formCaptchaSubmit（）{
 if（valCaptcha.val（）=== valCaptchaCode.html（）） {
 //验证码是正确的
} else {
 //验证码不正确
 valCaptcha.parent（）。addClass（invalid）; 
 randomgen（） ; 
} 
} 
 formCaptchaSubmit（）; 
 
 
 //如果NAME字段为空
函数formNameSubmit（）{
 if（valName.val（）===）{
 // Name is空
 valName.addClass（invalid）; 
} else {
 valName.removeClass（invalid）; 
} 
} 
 formNameSubmit（）; 
 
 
 //如果MESSAGE字段为空
函数formMessageSubmit（）{
 if（valMsg.val（）===）{
 //名称为空
 valMsg.addClass（invalid）; 
} else {
 valMsg.removeClass（invalid）; 
} 
} 
 formMessageSubmit（）; 
 
 $ b $ //提交表单（如果全部都是好的）
函数processForm（）{
 if（formEmailSubmit（）&&& formCaptchaSmit（）&& formNameSubmit（）&& formMessageSubmit（））{
 $（＃prospects_form）。attr（action，/clients/oubc/row-for-oubc-send.php）; 
 $（＃form_send）。attr（type，submit）; 
返回true; 
} else if（！formEmailSubmit（））{
 valEmail.addClass（invalid）; 
返回false; 
} else if（！formCaptchaSubmit（））{
 valCaptcha.parent（）。addClass（invalid）; 
返回false; 
} else if（！formNameSubmit（））{
 valName.addClass（invalid）; 
返回false; 
} else if（！formMessageSubmit（））{
 valMsg.addClass（invalid）; 
返回false; 
} else {
 return false; 
} 
} 
}）; 
}）; 
 //结束验证
 ///////////////// 
}）;


解决方案

您可以阻止表单提交

  $（＃prospects_form）。submit（function（e）{
 e.preventDefault（）; 
 }）;

当然，在函数中，您可以检查空字段，如果有东西没有看正确， e.preventDefault（）会停止提交。


How would I go about preventing the page from refreshing when pressing the send button without any data in the fields?

The validation is setup working fine, all fields go red but then the page is immediately refreshed. My knowledge of JS is relatively basic.

In particular I think the processForm() function at the bottom is 'bad'.

HTML

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>

    <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
    <div id="form_validation">
        <span class="form_captcha_code"></span>
        <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
    </div>
    <div class="clearfix"></div>
</form>

JS

$(document).ready(function() {

// Add active class to inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });



///////////////////
// START VALIDATION
$("#prospects_form").ready(function() {

    // DEFINE GLOBAL VARIABLES
    var valName = $('#form_name'),
        valEmail = $("#form_email"),
        valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        valMsg = $('#form_message'),
        valCaptcha = $('#form_captcha'),
        valCaptchaCode = $('.form_captcha_code');



    // Generate captcha
    function randomgen() {
        var rannumber = "";
        // Iterate through 1 to 9, 4 times
        for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
        // Apply captcha to element
        valCaptchaCode.html(rannumber);
    }
    randomgen();


    // CAPTCHA VALIDATION
    valCaptcha.blur(function() {
        function formCaptcha() {
            if ( valCaptcha.val() == valCaptchaCode.html() ) {
                // Incorrect
                valCaptcha.parent().addClass("invalid");
                return false;
            } else {
                // Correct
                valCaptcha.parent().removeClass("invalid");
                return true;
            }
        }
        formCaptcha();
    });

    // Remove invalid class from captcha if typing
    valCaptcha.keypress(function() {
        valCaptcha.parent().removeClass("invalid");
    });


    // EMAIL VALIDATION (BLUR)
    valEmail.blur(function() {
        function formEmail() {
            if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmail();
    });

    // Remove invalid class from email if typing
    valEmail.keypress(function() {
        valEmail.removeClass("invalid");
    });


    // VALIDATION ON SUBMIT
    $('#prospects_form').submit(function() {
        console.log('user hit send button');

        // EMAIL VALIDATION (SUBMIT)
        function formEmailSubmit() {
            if (!valEmailFormat.test(valEmail.val())) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmailSubmit();

        // Validate captcha
        function formCaptchaSubmit() {
            if( valCaptcha.val() === valCaptchaCode.html() ) {
                // Captcha is correct
            } else {
                // Captcha is incorrect
                valCaptcha.parent().addClass("invalid");
                randomgen();
            }
        }
        formCaptchaSubmit();


        // If NAME field is empty
        function formNameSubmit() {
            if ( valName.val() === "" ) {
                // Name is empty
                valName.addClass("invalid");
            } else {
                valName.removeClass("invalid");
            }
        }
        formNameSubmit();


        // If MESSAGE field is empty
        function formMessageSubmit() {
            if ( valMsg.val() === "" ) {
                // Name is empty
                valMsg.addClass("invalid");
            } else {
                valMsg.removeClass("invalid");
            }
        }
        formMessageSubmit();


        // Submit form (if all good)
        function processForm() {
            if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
                $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                $("#form_send").attr("type", "submit");
                return true;
            } else if( !formEmailSubmit() ) {
                valEmail.addClass("invalid");
                return false;
            } else if ( !formCaptchaSubmit() ) {
                valCaptcha.parent().addClass("invalid");
                return false;
            } else if ( !formNameSubmit() ) {
                valName.addClass("invalid");
                    return false;
                } else if ( !formMessageSubmit() ) {
                    valMsg.addClass("invalid");
                    return false;
                } else {
                    return false;
                }
            }
        });
    });
    // END VALIDATION
    /////////////////
});
解决方案

You can prevent the form from submitting with

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

Of course, in the function, you can check for empty fields, and if anything doesn't look right, e.preventDefault() will stop the submit.

这篇关于提交时停止表单刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-13 13:51
Powered by LMLPHP ©2024 processForm 0.048992