Input type email still allows to go through

Question

I have a textbox of input type email because it's meant for email addresses. So my page looks like this:

The input type of email should handle the syntax of email.So if email is test@@@gmail.com,it should not gone through though. When I hit send, it still able to initiate the email.

My javascript function:

<script>
    //function to send email

    function sendmessage(){

        var recipient = document.getElementById("recipient").value;

        var subject = document.getElementById("subject").value;

        var content=document.getElementById("content").value;



        $.ajax({

            url: 'sendemail.jsp',
            type: 'POST',
            data: {
                recipient:recipient,
                subject:subject,
                content:content

            },

            success: function (data) {
                alert("Successfully initiated email to queue");
            },
            error: function (request, error) {
                alert("Request: " + JSON.stringify(error));
            }
        });

    }



</script>

<body>

<div class="email_font">
&emsp;&emsp; To:<input type="email" style="font-size: 10pt;" size="70" id="recipient"><br><br>

        Subject:<input type="text" style="font-size: 10pt" size="70" id="subject" ><br><br>



Content:<br><textarea cols="80"  rows="10" id="content"  style="font-size: 13pt;">
    <%=files%>:   <%=url%>


</div>

<div class="Send">
    <button type="button" style="font: 13px/1.231 Trebuchet MS;" onclick="sendmessage()"> Send </button>
</div>

Clicking send still allows to send, is there anything I made wrong?

This is actually in a jsp page. So i am not using form though — Daredevil, Apr 18 '19 at 09:31
Validation only kicks in if you use a form and onsubmit. Your onclick will always fire, regardless of the validity of the input. — Roland Starke, Apr 18 '19 at 09:31
no, its still usefull, it helps to display a different keyboard on mobiles. You should wrap your inputs around a form to get the validation error. — Roland Starke, Apr 18 '19 at 09:33
If you can't change how the form is submitted, you can programatically validate the form and only do the ajax call in case of a valid form. Validation could also include required fields besides email format. — Dario, Apr 18 '19 at 09:35
can i use this example: https://stackoverflow.com/questions/31758303/html-5-form-validation-without-form? — Daredevil, Apr 18 '19 at 09:36
`` these are typical form-controls and should be used as such. If you want to validate your input field data without using the `onsubmit` functionality of the form, please use regex to validate the data within your js function. Form controls without form submit doesn't work the way they are supposed to. — Dblaze47, Apr 18 '19 at 09:40

score 2 · Answer 1 · answered Apr 18 '19 at 10:27

You can Split the emails on a comma and validate the entries one by one Following is the code to accept multiple valid email id both comma and semicolon as separator

  function validateEmails(emailString) {
        var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var result = emailString.replace(/\s/g, "").split(/,|;/);        
        for(var i = 0;i < result.length;i++) {
            if(!regex.test(result[i])) {
                return false;
            }
        }       
        return true;
    }

score 0 · Answer 2 · answered Apr 18 '19 at 09:44

0

Use the following code and it should help:

HTML:

<div class="input-wrp">
    <input type="email" name="email" placeholder="E-MAIL ID*" required>
    <p class="error">Email Error</p>
</div>

JS:

$('input[type="email"]').on('input', function() {
    email($(this));     //Function Call
});

function email(input) {           //Function
    var inputVal = input.val();
    var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if(!reg.test(inputVal) && inputVal.length > 0) {
        input.parent().find('.error').show();
     } else {
        input.parent().find('.error').hide();
     }
}

answered Apr 18 '19 at 09:44

Javed

253
3
5

what does this do? – Daredevil Apr 18 '19 at 09:46
validation for your email field ! – Javed Apr 18 '19 at 10:13
is there anything that i can change the `reg`? Because I can send to multiple recipient like this`test@hotmail.com,test123@hotmail.com` and it will say it's not valid – Daredevil Apr 18 '19 at 10:13
@Daredevil then u need to "split()" your input value and on every split run a regex on it. – Javed Apr 18 '19 at 10:28

Input type email still allows to go through

2 Answers2

HTML:

JS: