Question

很抱歉这个最简单的问题。

我在提交表单（下面的代码）时运行脚本，但首先我要在执行代码之前验证表单（包含一个必须是电子邮件的文本框）。

下面的脚本是从这里获取的，以确保表单数据传递到colorbox灯箱脚本。但是我只想在验证表单的情况下运行它。我不知道如何将其与电子邮件验证脚本相结合。救命！目前我有一个验证电子邮件（Dreamweaver）和运行的脚本，即使它没有验证，这个命令仍然运行，我不知道如何编辑它，所以它没有。

$(document).ready(function() {
    $("input#SearchButton").colorbox({href: function(){
   var url = $(this).parents('form').attr('action');
   var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
    return url+'?'+ser;
}, innerWidth:"1280", innerHeight:"884px", iframe:true, scrolling:false});

}）;

然后我用它来验证表格：

function MM_validateForm() { //v4.0
  if (document.getElementById){
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
 for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
  if (val) { nm=val.name; if ((val=val.value)!="") {
    if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
      if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
    } else if (test!='R') { num = parseFloat(val);
      if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
      if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
        min=test.substring(8,p); max=test.substring(p+1);
        if (num<min || max<num) errors+='- '+nm+' must contain a number  between '+min+' and '+max+'.\n';
  } }} else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');

}}

感谢!!!!

跳跳虎的HTML是：

<input name="submit" type="image" onclick="MM_validateForm('email','','RisEmail');return document.MM_returnValue" src="images/go-button.gif" alt="Go! Get quote now!" align="top" : id="SearchButton"/>

简而言之：如果表单使用html调用的第二个代码片段中的代码验证，即使在第三个代码段中，我想要在第一个代码段中触发代码，但如果不是，则不是。< / p>

Answer 1

您没有发布HTML，因此我不知道您是否有实际表单或只是没有实际表单标记的输入字段。

假设前者，您需要一个提交事件，以便您可以验证表单，然后，如果验证失败，则终止提交。

$('#my_form').submit(function() {

    //validate - forget the whole thing if it fails
    if (!$('#my_field').val()) return false;

    //if we get this far, validation succeeded - do other stuff now
});

只要提交回调返回false（或触发event.preventDefault（）），表单提交就会暂停。

Answer 2

安德鲁是正确的，如果您提供了html以确定事件触发器将会有什么帮助。简要回顾了jquery插件'colorbox'后，看起来灯箱被绑定到选择器点击事件。

假设安德鲁回答，如果电子邮件地址有效，则需要从表单的提交处理程序中手动触发灯箱的点击事件。以下代码就足够了。

    $('#my_form').on('submit', function(e){
    //perform validation.
    MM_validateForm('email','','RisEmail');
    //check the document variable set by the validation.
        if (!document.MM_returnValue)
        {
            //did not validate
        }else{
            //open the colorbox
            var search_btn = $('input#search');

                search_btn.colorbox({href: function(){
                   var url = $(this).parents('form').attr('action');
                   var ser = $(this).parents('form').serialize();
                    return url + '?' + ser;
            }, 
            innerWidth: "1280", 
            innerHeight: "884px", 
            iframe:true, 
            scrolling:false});

        //manually trigger the click event
        search_btn.trigger('click');
        }
    //in either instance, disable the default action to ensure the form does not follow through.
    e.preventDefault();
    });

显然，您必须使用自己的名称替换css选择器名称，并使用您可能拥有或不拥有的电子邮件验证脚本。

如果表单字段验证为电子邮件，则运行脚本

2 个答案: