禁用提交按钮,直到所有字段均已填写

时间:2019-11-24 19:12:06

标签: javascript jquery wordpress

我在wordpress中有一个联系表,是使用联系表7插件构建的。我在此处插入了一个嵌入的wetransfer上传按钮。嵌入代码会将文件上传到wetransfer,然后将表单中上传的网址自动填充到表单中的文本字段中。这就是我们转移上传按钮的工作方式。 我需要禁用提交按钮,直到所有字段都填满。但是代码无法检测到自动填充的网址框,并且提交按钮也不会启用。上传后,我必须在其他任何字段上键入内容,以便启用提交按钮。任何人都可以帮助我解决此问题?谢谢!这是表格 -https://sanketha.com/cf7/

我的联系方式7表格-

<p>[text* your-name id:name placeholder "Your Name"]</p>

<p>[email* your-email id:yourmail placeholder "Email"]</p>
<p>[text your-company id:company placeholder "Company (Optional)"]</p>
<p>[phonetext* your-number id:number placeholder "Phone"]</p>
<p>[textarea* your-message id:msg placeholder "Message"]</p>
<div data-widget-host="habitat" id="wt_embed">
  <script type="text/props">
    {
      "wtEmbedKey": "83711ba4-b18b-44e8-abac-687bc8374ce4",
      "wtEmbedOutput": "#wt_embed_output",
      "wtEmbedLanguage": "en"
    }
  </script>
</div>
<script async src="https://prod-embed-cdn.wetransfer.net/v1/latest.js"></script>
[text* wt_embed_output id:wt_embed_output class:wt_embed_output placeholder"WeTransfer Url"]
<center>[submit id:req class:sndbtn "Request Content"]</center>
</div>
jQuery(document).ready(function( $ ){

//validate();
//$('#name, #yourmail, #msg, #number, #company, #wt_embed_output').change(validate);
/* No need of above lines */

/* Disable Submit Button Default */
$("input[type=submit]").prop("disabled", true);

/* Disable custom input for url field */
$('#wt_embed_output').attr("readonly", "readonly");

/* Validate the email */
function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}
  /*
var wetr = false; 
$('#wt_embed_output').bind("change keyup",function(){
  console.log("uploaded");
  if ($(this).val().length  >   0)  {
    console.log("filled");
    wetr = true;
  } else {
    console.log("not filled");
    wetr = false;
  }
});
  */

function validate() {
    if ($('#name').val().length   >   0   &&
        $('#yourmail').val().length  >   0   &&
        isEmail($('#yourmail').val()) == true  &&
        $('#number').val().length  >   2   &&
        //wetr == true &&
        //$('#company').val().length  >   0   &&
        $('#wt_embed_output').val().length  >   0   &&
        $('#msg').val().length    >   0) 
    {
        $("input[type=submit]").prop("disabled", false);
    }
    else 
    {
        $("input[type=submit]").prop("disabled", true);
    }
}

/* company field is optional. So removed that validation : line (22) */
/* validate the email : line : (20) */

$('#name, #yourmail, #msg, #number, #company, #wt_embed_output').keyup(validate);
$('#name, #yourmail, #msg, #number, #company, #wt_embed_output').change(validate);

/* Keyup function is running every time when enter a character from keyboard */

//$('#name, #yourmail, #msg, #number, #company, #wt_embed_output').on("keyup change", validate);

});

0 个答案:

没有答案