Onsubmit not seems to work on chrome but it does in safari

[alexbloografix]

Hello and thank you for your time. I currently have a as follow:

<form name="orderForm" action="order.php" onsubmit="return validateForm(this);" method="post" enctype="multipart/form-data">

And the validateForm() function is located inside a separate file called validator.js - The file is in the same directory as the form. This seems to work on safari but doesn’t seem to work for me in chrome.

The .js file looks something like this:

function validateForm(form) {
var x = document.forms["orderForm"]["ContactName"].value;
	if (x == null || x == "") {
		alert("First name is a required field and cannot be left in blank.");
		return false;
	}
	
	var x = document.forms["orderForm"]["ContactName"].validity.valid;
	if (x == false) {
		alert("Please type a valid name starting with a capital letter. No dashes, spaces or special characters.");
		return false;
	}
}

Any advice will be appreciated? Thank you!

[Paul_Wilkins]

@alexbloografix

var x = document.forms[“orderForm”][“ContactName”].validity.valid;

What is supposed to happen with that above line? There seems to be something not quite right going on there.

[alexbloografix]

Hello Paul,

Thank you for answering. The line you pointed at is referring to an input field and using the validation from html5 and ensuring the regex is correct. If the validity is valid then true, everything is ok. But if is false it goes inside the if condition set. That means the user used something it shouldn’t have used, ie dash, spaces, etc.

All the details come from the HTML form and it works just fine, the only thing not seems to work at this time is the submit button (in chrome) as it does work fine in safari.

Regards,

~ Alex

[Paul_Wilkins]

@alexbloografix

All the details come from the HTML form and it works just fine, the only thing not seems to work at this time is the submit button (in chrome) as it does work fine in safari.

What does the code for your submit button look like?

[alexbloografix]

The submit button looks like this:

<div class="formElementRowFooter">
      <input class="btn btn-success btn-lg" id="submitbtn" name="submitbtn" type="Submit" value="Send order">
</div>

[Paul_Wilkins]

@alexbloografix

The submit button looks like this:

That all seems to run the scripting code on this test code that I’ve put together: https://jsfiddle.net/k0q6mgbt/

[alexbloografix]

Hello Paul and thank you for your efforts. I have no idea why is this working in safari but it does not work in chrome/edge.

Could have something to do with the .js file being a separate file? maybe loading the file at the header or at the footer? I’m currently loading the validator.js in the “Head Tag”

[Paul_Wilkins]

[quote=“alexbloografix, post:7, topic:256917, full:true”]
Hello Paul and thank you for your efforts. I have no idea why is this working in safari but it does not work in chrome/edge.[/quote]

What would really help is if there’s some way for us to use our own Chrome/Edge browsers to experience and investigate the problem that you are having.

[alexbloografix]

I tried changing to different locations and that did not solve the problem either. I mean the

<script src="./validator.js"></script>

I added it to the header, the body and also tried before closing the body tag at the footer. Nothing seems to work.

There is no reloading of the page, there is nothing. Click and release the button, but nothing at all happens.

Thank you very much for trying. If I figure it out I will be updating with the findings.

[alexbloografix]

I have some findings. When I place the following code all the way at the top of my validator.js file

alert("validator loaded");

and refresh the page on safari: it displays the alert window upon reload.

But when reloading the window in chrome it does not display the alert.

[Paul_Wilkins]

@alexbloografix

I tried changing to different locations and that did not solve the problem either. I mean the

<script src="./validator.js"></script>

I added it to the header, the body and also tried before closing the body tag at the footer. Nothing seems to work.

There is no reloading of the page, there is nothing. Click and release the button, but nothing at all happens.

Can you supply us with a test page that demonstrates the problem? That way more people than just yourself can experience the issue.

[alexbloografix]

Thank you for your response once again. This page is running live and I do not want to compromise the code and whatever security methods used (since it is a webstore module) I might just be above my knowledge trying to fix this. I thought it was something ovious (hence the fiddle) it should work. But it doesnt. I will continue trying by logic I have to stumble upon something gotta stay optimistic.

Thank you.

[alexbloografix]

Hello Paul, the problem was not within the .js or anything like that. There was a block of fields that were hidden:

<div id="admDivCheck" style="display:none;">

and was being validated but no error showed on the screen. After removing the required field it works now. Now I need to implement a fallback to removing the HTML required fields.

Thank you very much for your efforts.