Pregunta

How could I delay window.open from going to the link until all fields required on the form is filled out?

you can see Here the form.

Here is a look at the form setup:

<div name="loan-form" class="loan-form">
<div class="required-notice"><br />
</div>
<div class="loan-form-body">
<label>First Name:<span class="required-star">*</span></label>
<input type="text" name="FirstName" id="firstname" class="validate required" />
<label>Last Name:<span class="required-star">*</span></label>
<input type="text" name="LastName" id="lastname" />
<label>Email Address:<span class="required-star">*</span></label>
<input type="text" name="EmailAddress" id="emailaddress" class="validate required" />
<label>Address:<span class="required-star">*</span></label>
<input type="text" name="HomeAddress" id="HomeAddress" class="validate required" />
<label>Work Phone:</label>
<input type="text" name="DaytimePhone" id="daytimephone" />
<input type="submit" onclick="return validate();" class="button" data-form-type="submit" value="Get An Instant Report" />
</div>
</div>

this is the script I am currently using for onclick function:

function validate()
    {
    $('#HomeAddress').cleartitlelabel();
            var address = $('#HomeAddress').val();
            if (address == undefined)
            address = '';
             window.open('/tools/marketvalue.aspx?address=' + address);

    var frm = document.forms['homevalueform'];
     if (frm.EmailAddress.value == "")
      {
        alert("Please make sure you have completed all required fields.");
        frm.EmailAddress.focus();
        return (false);
      }
     if (frm.LastName.value == "")
      {
        alert("Please make sure you have completed all required fields.");
        frm.LastName.focus();
        return (false);
      }
     if (frm.FirstName.value == "")
      {
        alert("Please make sure you have completed all required fields.");
        frm.FirstName.focus();
        return (false);
      }
     if (frm.HomeAddress.value == "")
      {
        alert("Please make sure you have completed all required fields.");
        frm.HomeAddress.focus();
        return (false);
     }

    return true;

    }

Sadly I could not get it to work.

Maybe I did not follow correctly but this is what I gathered:

function validate()
{
var isValid = false;
var frm = document.forms['homevalueform'];
 if (frm.EmailAddress.value == "")
  {
    alert("Please make sure you have completed all required fields.");
    frm.EmailAddress.focus();
    return false;
  }
 if (frm.LastName.value == "")
  {
    alert("Please make sure you have completed all required fields.");
    frm.LastName.focus();
    return false;
  }
 if (frm.FirstName.value == "")
  {
    alert("Please make sure you have completed all required fields.");
    frm.FirstName.focus();
    return false;
  }
 if (frm.HomeAddress.value == "")
  {
    alert("Please make sure you have completed all required fields.");
    frm.HomeAddress.focus();
    return false;
 }
$('#HomeAddress').cleartitlelabel();
        var address = $('#HomeAddress').val();
        if (address == undefined)
        address = '';
     if( isValid ){
    window.open('/tools/marketvalue.aspx?address=' + address);
    return true;
}else{
    return false;
}
}
¿Fue útil?

Solución

First: there is no need to wrap return (false); you can simply do return false;

Second: you can setup a flag at the top of your function to false and if all elements pass your validation, set it to true.

At the end of the function, check if the flag is true and if so, call your window.open

ie. (inside your validation function)

UPDATED

function validate() {
    var isValid = true;

    var frm = document.forms['homevalueform'];

    if (frm.EmailAddress.value == "") {
        alert("Please make sure you have completed all required fields.");
        frm.EmailAddress.focus();
        isValid = false;
    }
    if (frm.LastName.value == "") {
        alert("Please make sure you have completed all required fields.");
        frm.LastName.focus();
        isValid = false;
    }
    if (frm.FirstName.value == "") {
        alert("Please make sure you have completed all required fields.");
        frm.FirstName.focus();
        isValid = false;
    }
    if (frm.HomeAddress.value == "") {
        alert("Please make sure you have completed all required fields.");
        frm.HomeAddress.focus();
        isValid = false;
    }

    $('#HomeAddress').cleartitlelabel();
    var address = $('#HomeAddress').val();

    if (address == undefined){
        address = '';
    }

    if (isValid) {
        window.open('/tools/marketvalue.aspx?address=' + address);
        return true;
    } else {
        return false;
    }
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top