$(function(){
$("#submit").click(function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var ans = true;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if(first_name === ""){
window.alert("لا يمكنك ترك خانةالاسم فارغة");
$("#first_name").addClass("WrongInp");
ans = false;
}else{
$("#first_name").removeClass("WrongInp");
}
if(last_name === ""){
window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
$("#last_name").addClass("WrongInp");
ans = false;
}else{
$("#last_name").removeClass("WrongInp");
}
if(phone.value === ""){
window.alert("لا يمكنك ترك خانةالهاتف فارغة");
$("#phone").addClass("WrongInp");
ans = false;
}else{
$("#phone").removeClass("WrongInp");
}
if(phone.length < 9 || phone.length > 14){
window.alert("ادخل رقم هاتف صحيح");
$("#phone").addClass("WrongInp");
ans = false;
}else{
$("#phone").removeClass("WrongInp");
}
if (email === '') {
alert('الرجاء ادخال البريد الالكتروني');
return false;
}
if (atpos < 1 || dotpos < atpos 2 || dotpos 2 >= email.length) {
alert("البريد الالكتروني غير صحيح");
return false;
}
if(ans === true){
var url = 'Cant Reveal';
var form = new FormData();
form.append("first_name", $('#first_name').val());
form.append("last_name", $('#last_name').val());
form.append("phone", $('#phone').val());
form.append("email", $('#email').val());
form.append("status", "new");
var settings = {
"url": "cant Reveal",
"method": "POST",
"timeout": 0,
"headers": {
"Authorization": "Cant Reveal"
},
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
};
$.ajax(settings).done(function (response) {
window.location.href = "www.google.com";
});
}
return false;
});
});<form id="myForm">
<input name="first_name" id="first_name" class="input" type="text" placeholder="الاسم الكامل" required />
<input name="phone" id="phone" minlength="8" maxlength="15" class="input" type="text" placeholder="الجوال" required />
<input name="email" id="email" pattern="[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,}" class="input" type="text" placeholder="البريد الالكتروني" required />
<button type="text" class="submit">submit</button>
<input type="hidden" name="last_name" id="last_name" value="LN">
</form>i think i made changes in the javascript, first i validate the form and then i submit it with ans ans must be true and if one of the fields empty or phone and email doesnt match my validation if goes to false and do not continue
any suggestions to make in javascript section or maybe i can delete this section and write another better one ....
CodePudding user response：
The click handler does not work because you bind it to the HTML element with the id submit - $("#submit").
In the provided HTML you're using a class submit, not the id.
<button type="text" class="submit">submit</button>
To make a handler work change this line:
$("#submit").click(function(){
to this one
$(".submit").click(function(){
Another option is to use id instead of class in the HTML
<button type="text" id="submit">submit</button>
any suggestions to make in javascript section or maybe i can delete this section and write another better one ....
If you are a beginner, it's completely ok to have it like this. If you want to make it a bit cleaner (since you're using jQuery), I'd suggest you take a look at the plugin like - jquery-validation
CodePudding user response：
Give this a go.
$(document).ready(function(){
$("#submit").click(function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var ans = true;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if(first_name === ""){
window.alert("لا يمكنك ترك خانةالاسم فارغة");
$("#first_name").addClass("WrongInp");
ans = false;
}else{
$("#first_name").removeClass("WrongInp");
}
if(last_name === ""){
window.alert("لا يمكنك ترك خانةاسم العائلة فارغة");
$("#last_name").addClass("WrongInp");
ans = false;
}else{
$("#last_name").removeClass("WrongInp");
}
if(phone.value === ""){
window.alert("لا يمكنك ترك خانةالهاتف فارغة");
$("#phone").addClass("WrongInp");
ans = false;
}else{
$("#phone").removeClass("WrongInp");
}
if(phone.length < 9 || phone.length > 14){
window.alert("ادخل رقم هاتف صحيح");
$("#phone").addClass("WrongInp");
ans = false;
}else{
$("#phone").removeClass("WrongInp");
}
if (email === '') {
alert('الرجاء ادخال البريد الالكتروني');
return false;
}
if (atpos < 1 || dotpos < atpos 2 || dotpos 2 >= email.length) {
alert("البريد الالكتروني غير صحيح");
return false;
}
if(ans === true){
var url = 'Cant Reveal';
var form = new FormData();
form.append("first_name", $('#first_name').val());
form.append("last_name", $('#last_name').val());
form.append("phone", $('#phone').val());
form.append("email", $('#email').val());
form.append("status", "new");
var settings = {
"url": "cant Reveal",
"method": "POST",
"timeout": 0,
"headers": {
"Authorization": "Cant Reveal"
},
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
};
$.ajax(settings).done(function (response) {
window.location.href = "www.google.com";
});
}
return false;
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input name="first_name" id="first_name" class="input" type="text" placeholder="الاسم الكامل" required />
<input name="phone" id="phone" minlength="8" maxlength="15" class="input" type="text" placeholder="الجوال" required />
<input name="email" id="email" pattern="[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,}" class="input" type="text" placeholder="البريد الالكتروني" required />
<button type="text" class="submit">submit</button>
<input type="hidden" name="last_name" id="last_name" value="LN">
</form>