thaabitv thaabitv - 22 days ago 11
Ajax Question

i have some validation on an email input with an ajax call the validation runs but not the call can any give some help as to why this is happening?

this is the email input:

<div class="input-group emailInput" style="min-width:300px;max-width:637px;">
<input type="email" class="form-control input1" id="emailAddress" placeholder="Email Address">
<span class="input-group-btn">
<button class="btn btn-secondary input2" type="button" onclick="validate()" style="padding:0px;border:0px;"><div style="padding:7px; background-color:#FF2B68;color:white;">></div></button>
</span>
</div>


the script:

function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\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,}))$/;
return re.test(email);
}

function validate()
{
$("#result").text("");

var email = $("#emailAddress").val();

if (validateEmail(email)) {
$("#result").text(" Email sent.");
$("#result").css("color", "green");
function validate()
{
var settings = {
"async": true,
"crossDomain": true,
"url": "https://mandrillapp.com/api/1.0/messages/send-template.json",
"method": "POST",
"headers": {
"content-type": "application/json"
},
"processData": false,
"data": "{\n \"key\": \"key goes here\",\n\t\"message\":{\n\t\t\"subject\": \"test invitation\",\n\t\t\"from_email\": \"info@test.co.za\",\n\t\t\"from_name\": \"Test Group\",\n\t\t\"to\": [{\"email\": \"email.com\", \"name\": \"Applicant\"}]\n\t},\n\t\"template_content\": \n\t[\n\t\t{\n\t\t\t\"name\": \"test\",\n\t\t\t\"content\": \"https://www.test.co.za/invite/\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"createAccount\",\n\t\t\t\"content\": \"test\" \n\t\t}\n\t],\n \"template_name\": \"test-template\"\n}"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
};

}else {
$("#result").text(" Please enter a valid email address.");
$("#result").css("color", "red");
}
return false;
}

$("form").bind("submit", validate);

Answer

you have a wrong validate function declaration inside validate function. You do not need the ajax call to be wrapped inside this. the below code will work fine.

var validate = function() 
    {
        $("#result").text("");

        var email = $("#emailAddress").val();

        if (validateEmail(email) == true) {
            $("#result").text(" Email sent.");
            $("#result").css("color", "green");


                var settings = {
                  "async": true,
                  "crossDomain": true,
                  "url": "https://mandrillapp.com/api/1.0/messages/send-template.json",
                  "method": "POST",
                  "headers": {
                    "content-type": "application/json"
                  },
                  "processData": false,
                  "data": "{\n  \"key\": \"key goes here\",\n\t\"message\":{\n\t\t\"subject\": \"test invitation\",\n\t\t\"from_email\": \"info@test.co.za\",\n\t\t\"from_name\": \"Test Group\",\n\t\t\"to\": [{\"email\": \"email.com\", \"name\": \"Applicant\"}]\n\t},\n\t\"template_content\": \n\t[\n\t\t{\n\t\t\t\"name\": \"test\",\n\t\t\t\"content\": \"https://www.test.co.za/invite/\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"createAccount\",\n\t\t\t\"content\": \"test\" \n\t\t}\n\t],\n  \"template_name\": \"test-template\"\n}"
                }
                $.ajax(settings).done(function (response) {
                  console.log(response);
                });


        }else {
            $("#result").text(" Please enter a valid email address.");
            $("#result").css("color", "red");
        }
        return false;
    }

P.S : for any such issues always use the develop console to check whats ging on with the code. you can put console.log("comment/object") to check at what point code is breaking.

Comments